Slider
Usage
onChange value: 35onChangeEnd value: 35
Properties
onChange value: 35onChangeEnd value: 35
Color
Size
Round
Slider Inverted
Slider Label
No labelFormatted labelLabel always visibleCustom label transition
Slider Marks
MarksRestrict selection to marksDisabled
Slider Scale
Slider Step
Decimal Values
Decimal stepStep matched with marks
Decimal stepStep matched with marks
Slider Thumb
Thumb Icon
Thumb size
API References
Styles API
type T = "root" | "label" | "thumb" | "trackContainer" | "track" | "bar" | "markWrapper" | "mark" | "markLabel";| Styles API | Type | Default | Annotation |
|---|---|---|---|
unstyled? | Partial<Record<T, boolean>> | false | if true, default styles will be removed |
className? | string | undefined | pass to root component <div> |
classNames? | Partial<Record<T, string>> | undefined | |
style? | CSSProperties | undefined | pass to root component <div> |
styles? | Partial<Record<T, CSSProperties>> | undefined |
Props API
| Props API | Type | Default | Annotation |
|---|---|---|---|
dir? | "ltr" | "rtl" | ltr | Type of direction slider |
color? | CSSProperties["color"] | hsl(var(--constructive)) | Key of valid CSS color, controls color of track and thumb |
round? | number | string | 999 | Key of valid CSS value to set border-radius, numbers are converted to rem |
size? | (string & {}) | number | 12 | Controls size of the track |
min? | number | 0 | Minimal possible value |
max? | number | 100 | Maximum possible value |
step? | number | 1 | Number by which value will be incremented/decremented with thumb drag and arrows |
precision? | number | Number of significant digits after the decimal point | |
value? | number | Controlled component value | |
defaultValue? | number | Uncontrolled component default value | |
onChange? | (value: number) => void | Called when value changes | |
onChangeEnd? | (value: number) => void | Called when user stops dragging slider or changes value with arrows | |
name? | string | Hidden input name, use with uncontrolled component | |
marks? | { value: number; label?: React.ReactNode }[] | Marks displayed on the track | |
label? | React.ReactNode | ((value: number) => React.ReactNode) | Function to generate label or any react node to render instead, set to null to disable label | |
labelTransitionProps? | TransitionOverride | 0 | Props passed down to the Transition component, { transition: 'fade', duration: 0 } |
labelAlwaysOn? | boolean | false | Determines whether the label should be visible when the slider is not being dragged or hovered |
thumbLabel? | string | Thumb aria-label | |
showLabelOnHover? | boolean | true | Determines whether the label should be displayed when the slider is hovered |
thumbChildren? | React.ReactNode | Content rendered inside thumb | |
disabled? | boolean | false | Disables slider |
thumbSize? | number | string | size | Thumb width and height, by default value is computed based on size prop |
scale? | (value: number) => number | A transformation function to change the scale of the slider | |
inverted? | boolean | false | Determines whether track value representation should be inverted |
hiddenInputProps? | React.ComponentPropsWithoutRef<"input"> | Props passed down to the hidden input | |
restrictToMarks? | boolean | false | Determines whether the selection should be only allowed from the given marks array |
thumbProps? | React.ComponentPropsWithoutRef<"div"> | Props passed down to thumb element |