Slider
Usage
Controlled
By default, both Slider and RangeSlider are uncontrolled, add onChange and value props to make them controlled:
Disabled state
onChangeEnd
onChangeEnd
callback is called when user stops dragging the slider or uses arrows:
Control label
To change label behavior and appearance, set the following props:
label
– formatter function, accepts value as an argument, set null to disable label, defaults tof => f
labelAlwaysOn
– if true – label will always be displayed, by default label is visible only when user is dragginglabelTransition
,labelTransitionDuration
,labelTransitionTimingFunction
– label uses Transition component to animate presence, you can choose any premade transition or create your own
Min, max and step
Marks
Add any number of marks to slider by setting marks
prop to an array of objects:
Note that mark value is relative to slider value, not width:
Thumb size
Thumb children
Scale
You can use the scale
prop to represent the value on a different scale.
In the following demo, the value x
represents the value 2^x
. Increasing x
by one increases the represented value by 2 to the power of x
.
Inverted
You can invert the track with the inverted
prop:
Styles API
You can change styles of any element in slider component with Styles API to match your design requirements:
Vertical slider
Slider and RangeSlider do not provide vertical orientation as it is very rarely used. If you need this feature you should build it yourself with use-move hook.
Accessibility
Slider and RangeSlider components are accessible by default:
- Slider thumbs are focusable
- When the user uses mouse to interact with a slider, focus is moved on slider track, when the user presses arrows focus is moved on thumb
- Value can be changed with arrows with step increment/decrement
To label component for screen readers, add labels to thumbs:
Keyboard interactions
Key | Description |
---|---|
ArrowRight/ArrowUp | Increases slider value by one step |
ArrowLeft/ArrowDown | Decreases slider value by one step |
Home | Sets slider value to min value |
End | Sets slider value to max value |
Slider component props
Name | Type | Description |
---|---|---|
color | MantineColor | Color from theme.colors |
defaultValue | number | Default value for uncontrolled slider |
disabled | boolean | Disables slider |
inverted | boolean | Allows the track to be inverted |
label | ReactNode | ((value: number) => ReactNode) | Function to generate label or any react node to render instead, set to null to disable label |
labelAlwaysOn | boolean | If true label will be not be hidden when user stops dragging |
labelTransition | MantineTransition | Label appear/disappear transition |
labelTransitionDuration | number | Label appear/disappear transition duration in ms |
labelTransitionTimingFunction | string | Label appear/disappear transition timing function, defaults to theme.transitionRimingFunction |
marks | { value: number; label?: ReactNode; }[] | Marks which will be placed on the track |
max | number | Maximum possible value |
min | number | Minimal possible value |
name | string | Hidden input name, use with uncontrolled variant |
onChange | (value: number) => void | Called each time value changes |
onChangeEnd | (value: number) => void | Called when user stops dragging slider or changes value with arrows |
precision | number | Amount of digits after the decimal point |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, "xl" by default |
scale | (value: number) => number | A transformation function, to change the scale of the slider |
showLabelOnHover | boolean | If true slider label will appear on hover |
size | number | "xs" | "sm" | "md" | "lg" | "xl" | Controls size of track and thumb |
step | number | Number by which value will be incremented/decremented with thumb drag and arrows |
thumbChildren | ReactNode | Thumb children, can be used to add icon |
thumbLabel | string | Thumb aria-label |
thumbSize | number | Thumb width and height |
value | number | Current value for controlled slider |
RangeSlider component props
Name | Type | Description |
---|---|---|
color | MantineColor | Color from theme.colors |
defaultValue | Value | Default value for uncontrolled slider |
disabled | boolean | Disables slider |
inverted | boolean | Allows the track to be inverted |
label | ReactNode | ((value: number) => ReactNode) | Function to generate label or any react node to render instead, set to null to disable label |
labelAlwaysOn | boolean | If true label will be not be hidden when user stops dragging |
labelTransition | MantineTransition | Label appear/disappear transition |
labelTransitionDuration | number | Label appear/disappear transition duration in ms |
labelTransitionTimingFunction | string | Label appear/disappear transition timing function, defaults to theme.transitionRimingFunction |
marks | { value: number; label?: ReactNode; }[] | Marks which will be placed on the track |
max | number | Maximum possible value |
maxRange | number | Maximum range interval |
min | number | Minimal possible value |
minRange | number | Minimal range interval |
name | string | Hidden input name, use with uncontrolled variant |
onChange | (value: Value) => void | Called each time value changes |
onChangeEnd | (value: Value) => void | Called when user stops dragging slider or changes value with arrows |
precision | number | Amount of digits after the decimal point |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default |
scale | (value: number) => number | A transformation function, to change the scale of the slider |
showLabelOnHover | boolean | If true slider label will appear on hover |
size | number | "xs" | "sm" | "md" | "lg" | "xl" | Predefined track and thumb size, number to set sizes |
step | number | Number by which value will be incremented/decremented with thumb drag and arrows |
thumbChildren | ReactNode | Thumbs children, can be used to add icons |
thumbFromLabel | string | First thumb aria-label |
thumbSize | number | Thumb width and height |
thumbToLabel | string | Second thumb aria-label |
value | Value | Current value for controlled slider |
Slider component Styles API
Name | Static selector | Description |
---|---|---|
root | .asuikit-Slider-root | Root element |
trackContainer | .asuikit-Slider-trackContainer | Wrapper around track, handles drag events |
track | .asuikit-Slider-track | Track element, contains all other elements |
bar | .asuikit-Slider-bar | Filled part of the track |
thumb | .asuikit-Slider-thumb | Main control |
dragging | .asuikit-Slider-dragging | Styles added to thumb while dragging |
label | .asuikit-Slider-label | Label element, displayed above thumb |
marksContainer | .asuikit-Slider-marksContainer | Wrapper around all marks, helps position the marks above the track |
markWrapper | .asuikit-Slider-markWrapper | Wrapper around mark, contains mark and mark label |
mark | .asuikit-Slider-mark | Mark displayed on the track |
markFilled | .asuikit-Slider-markFilled | Styles added to mark when it is located in filled area |
markLabel | .asuikit-Slider-markLabel | Mark label, displayed below track |
RangeSlider component Styles API
Name | Static selector | Description |
---|---|---|
root | .asuikit-RangeSlider-root | Root element |
trackContainer | .asuikit-RangeSlider-trackContainer | Wrapper around track, handles drag events |
track | .asuikit-RangeSlider-track | Track element, contains all other elements |
bar | .asuikit-RangeSlider-bar | Filled part of the track |
thumb | .asuikit-RangeSlider-thumb | Main control |
dragging | .asuikit-RangeSlider-dragging | Styles added to thumb while dragging |
label | .asuikit-RangeSlider-label | Label element, displayed above thumb |
marksContainer | .asuikit-RangeSlider-marksContainer | Wrapper around all marks, helps position the marks above the track |
markWrapper | .asuikit-RangeSlider-markWrapper | Wrapper around mark, contains mark and mark label |
mark | .asuikit-RangeSlider-mark | Mark displayed on the track |
markFilled | .asuikit-RangeSlider-markFilled | Styles added to mark when it is located in filled area |
markLabel | .asuikit-RangeSlider-markLabel | Mark label, displayed below track |