Slider
Introduction
A slider is a numeric input for choosing numbers between lower and upper bounds. It also has a labeled axis that supports custom formatting.
To adjust a slider value, the user clicks and drags a handle or clicks the axis to move the nearest handle to that spot. Users can also use arrow keys on the keyboard to adjust individual handles.
Use Slider
for choosing a single value, RangeSlider
for choosing two values,
and MultiSlider
for more advanced use cases.
Examples
SyntaxError: Unexpected token (5:1) 1 : return (() => { 2 : [value, setValue] = React.useState(2); 3 : 4 : return <Slider value={value} onChange={newValue => setValue(newValue)} />; 5 : };) ^
SyntaxError: Unexpected token (7:1) 3 : 4 : return ( 5 : <RangeSlider value={range} onChange={newRange => setRange(newRange)} /> 6 : ); 7 : };) ^
SyntaxError: Unexpected token (24:1) 20 : /> 21 : <MultiSlider.Handle value={multi[3]} type="end" /> 22 : </MultiSlider> 23 : ); 24 : };) ^
Usage
Slider
Use Slider
to choose a single value on a number line. It is a controlled
component, so the value
prop determines its current appearance. Provide an
onChange
handler to receive updates and an onRelease
handler to determine
when the user has stopped interacting with the slider.
RangeSlider
Use RangeSlider
to choose a range between upper and lower bounds. The
component functions identically to Slider
with the addition of a second
handle. It exposes its selected value as [number, number]
: a two-element array
with minimum and maximum range bounds.
RangeSlider
is a controlled component, so the value
prop determines its
current appearance. Provide an onChange
handler to receive updates and an
onRelease
handler to determine when the user has stopped interacting with the
slider.
MultiSlider
MultiSlider
is a flexible solution for picking arbitrary values on a number
line. It powers both Slider
and RangeSlider
internally and can be used for
implementing more advanced use cases than one or two numbers.
API Reference
Slider
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to a child element. |
disabled | false | boolean | Whether the slider is non-interactive. |
initialValue | false | number | Initial value of the slider. This determines the other end of the track fill: from `initialValue` to `value`. |
labelPrecision | false | number | Number of decimal places to use when rendering label value. Default value is the number of decimals used in the `stepSize` prop. This prop has _no effect_ if you supply a custom `labelRenderer` callback. |
labelRenderer | false | boolean | (value: number) => string | Element | Callback to render a single label. Useful for formatting numbers as currency or percentages. If `true`, labels will use number value formatted to `labelPrecision` decimal places. If `false`, labels will not be shown. |
labelStepSize | false | number | Increment between successive labels. Must be greater than zero. |
max | false | number | Maximum value of the slider. |
min | false | number | Minimum value of the slider. |
showTrackFill | false | boolean | Whether a solid bar should be rendered on the track between current and initial values, or between handles for `RangeSlider`. |
stepSize | false | number | Increment between successive values; amount by which the handle moves. Must be greater than zero. |
value | false | number | Value of slider. |
vertical | false | boolean | Whether to show the slider in a vertical orientation. |
RangeSlider
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to a child element. |
disabled | false | boolean | Whether the slider is non-interactive. |
labelPrecision | false | number | Number of decimal places to use when rendering label value. Default value is the number of decimals used in the `stepSize` prop. This prop has _no effect_ if you supply a custom `labelRenderer` callback. |
labelRenderer | false | boolean | (value: number) => string | Element | Callback to render a single label. Useful for formatting numbers as currency or percentages. If `true`, labels will use number value formatted to `labelPrecision` decimal places. If `false`, labels will not be shown. |
labelStepSize | false | number | Increment between successive labels. Must be greater than zero. |
max | false | number | Maximum value of the slider. |
min | false | number | Minimum value of the slider. |
showTrackFill | false | boolean | Whether a solid bar should be rendered on the track between current and initial values, or between handles for `RangeSlider`. |
stepSize | false | number | Increment between successive values; amount by which the handle moves. Must be greater than zero. |
value | false | NumberRange | Range value of slider. Handles will be rendered at each position in the range. |
vertical | false | boolean | Whether to show the slider in a vertical orientation. |
MultiSlider
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to a child element. |
defaultTrackIntent | false | Intent | Default intent of a track segment, used only if no handle specifies `intentBefore/After`. |
disabled | false | boolean | Whether the slider is non-interactive. |
labelPrecision | false | number | Number of decimal places to use when rendering label value. Default value is the number of decimals used in the `stepSize` prop. This prop has _no effect_ if you supply a custom `labelRenderer` callback. |
labelRenderer | false | boolean | (value: number) => string | Element | Callback to render a single label. Useful for formatting numbers as currency or percentages. If `true`, labels will use number value formatted to `labelPrecision` decimal places. If `false`, labels will not be shown. |
labelStepSize | false | number | Increment between successive labels. Must be greater than zero. |
max | false | number | Maximum value of the slider. |
min | false | number | Minimum value of the slider. |
showTrackFill | false | boolean | Whether a solid bar should be rendered on the track between current and initial values, or between handles for `RangeSlider`. |
stepSize | false | number | Increment between successive values; amount by which the handle moves. Must be greater than zero. |
vertical | false | boolean | Whether to show the slider in a vertical orientation. |