A Slider and Input component for displaying current value and intervals in range.
SliderInput
import { SliderInput } from '@yuntijs/ui';A Slider and Input component for displaying current value and intervals in range.
import { SliderInput } from '@yuntijs/ui';A Slider and Input component for displaying current value and intervals in range.
| Name | Description | Type | Default |
|---|---|---|---|
| value | The current value | number | -- |
| defaultValue | The initial value | number | -- |
| min | The min value | number | -- |
| max | The max value | number | -- |
| step | The number to which the current value is increased or decreased. It can be an integer or decimal | number | -- |
| gutter | Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time [horizontal, vertical] | number | -- |
| sliderCol | Slider layout, like <Col> component. Set span offset value like {span: 3, offset: 12} or sm: {span: 3, offset: 12} | ColProps | {"span":12} |
| inputCol | The layout for input controls, same as sliderCol, see https://ant.design/components/grid#row for detail | ColProps | {"span":5} |
| addonAfter | The label text displayed before (on the left side of) the input field | ReactNode | -- |
| addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | -- |
| placeholder | placeholder | string | -- |
| onChange | The callback triggered when the value is changed | (value:number)=>void | -- |
| style | style | {} | -- |
| className | className | string | -- |
| sliderProps | the props of slider, see https://ant.design/components/slider#api for detail | SliderSingleProps | {} |
| inputProps | the props of input, see https://ant.design/components/input-number#api for detail | InputNumberProps | {} |
{}