提供了两个滑块组件: Slider和RangeSlider
Slider 单个滑点, value为单值.RangeSlider 双滑点, value为元组(有且仅有两个元素的数组), 表示范围的两个边界值.和React原生的<input>组件一样, defaultValue为非受控属性,value为受控属性.
onChange是在滑动过程中触发, 而onChangeEnd是在滑动结束(如用户释放鼠标时)触发.
Marks是在轨道上定义标记, 标记由标记点和标记文本组成. Marks是一个对象数组: {value: number; label?: string;}[]
其中: value在轨道上显示标记点; label是可选的, 如果定义则会在标记点下方显示文本.
Label是当前值的文本表示, 它会显示在滑点的上方.
Label可以是文本也可以是函数(参数为当前值). 函数形式更为有用.
默认为当鼠标覆盖显示Label, 可以设置labelAlwaysOn为true使label常常显示.
如果想完全不显示, 可以设置label为null
可以通过样式槽自定义各组件的样式:
如果只想修改bar的颜色, 可以简单的通过color属性设置.
inverted属性用于反转, 但值并未不会改变, 具体的意义需要由应用程序处理.
当Slider获得焦点后就可以通过键盘进行操作.
| 键盘键 | 描述 |
|---|---|
| ArrowRight/ArrowUp | 增加一步 |
| ArrowLeft/ArrowDown | 减少一步 |
| Home | 滑到最小值, 仅Silder支持, RangeSlider不支持 |
| End | 滑到最大值, 仅Silder支持, RangeSlider不支持 |
| 属性名 | 类型 | 是否必须 | 默认值 | 说明 |
|---|---|---|---|---|
| color | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error" | "neutral" | Color | undefined | no | 'primary' | Key of Preset or any valid CSS color, controls color of track and thumb |
| defaultValue | number | undefined | no | Uncontrolled default value | |
| disabled | boolean | undefined | no | Disables slider | |
| hiddenInputProps | Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> | undefined | no | Props passed down to the hidden input | |
| inverted | boolean | undefined | no | false | Determines whether track values representation should be inverted |
| label | ReactNode | ((value: number) => ReactNode) | no | (v) => v | Function to generate label or any react node to render instead, set to null to disable label |
| labelAlwaysOn | boolean | undefined | no | false | Determines whether the label should be visible when the slider is not being dragged or hovered |
| labelTransitionProps | Pick<TransitionProps, "transition" | "duration" | "timingFunction"> | undefined | no | {transition: 'fade', duration: 150 } | Props passed down to the Transition component, |
| marks | { value: number; label?: ReactNode; }[] | undefined | no | Marks displayed on the track | |
| max | number | undefined | no | 100 | Maximum possible value |
| min | number | undefined | no | 0 | Minimal possible value |
| name | string | undefined | no | Hidden input name, use with uncontrolled component | |
| onChange | ((value: number) => void) | undefined | no | Called when value changes | |
| onChangeEnd | ((value: number) => void) | undefined | no | Called when user stops dragging slider or changes value with arrows | |
| precision | number | undefined | no | Number of significant digits after the decimal point | |
| radius | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined | no | 'xl' | Key of Preset or any valid CSS value to set border-radius |
| scale | ((value: number) => number) | undefined | no | (v) => v | A transformation function to change the scale of the slider |
| showLabelOnHover | boolean | undefined | no | true | Determines whether thumb label should be displayed when the slider is hovered, |
| size | string | number | undefined | no | 'md' | Controls size of the track |
| slots | { root?: string | undefined; trackContainer?: string | undefined; track?: string | undefined; bar?: string | undefined; mark?: string | undefined; markLabel?: string | undefined; thumb?: string | undefined; label?: string | undefined; } | undefined | no | 样式槽, 可自定义内部组件的样式 | |
| step | number | undefined | no | 1 | Number by which value will be incremented/decremented with thumb drag and arrows |
| thumbChildren | React.ReactNode | no | Content rendered inside thumb | |
| thumbLabel | string | undefined | no | Thumb aria-label | |
| thumbSize | string | number | undefined | no | size*2 | Thumb width and height |
| value | number | undefined | no | Controlled value |