Slider
Slider
component enables users to select a value from a range of values.Basic usage
min
of 0
, max
of 100
, and step size of 1
.tsxCopied1<Slider label="Slide me!" id="mySlider" />2<Text>The slider value is {sliderState.value}</Text>
Marks
tsxCopied1<Slider2label="Choose a size"3min={0}4max={4}5marks={[6{ value: 0, label: "XS" },7{ value: 1, label: "S" },8{ value: 2, label: "M" },9{ value: 3, label: "L" },10{ value: 4, label: "XL" },11]}12/>
Disabling
defaultDisabled
prop.tsxCopied1<Slider label="My disabled slider" defaultDisabled />
Inverted
inverted
prop. An inverted slider will be filled in from the
right rather than from the left.tsxCopied1<Slider label="My inverted slider" inverted />
Value label
valueLabel
prop and change when the value label is
displayed using valueLabelDisplay
. Changing the value label will not change the underlying value
stored in the slider component's state.tsxCopied1<Slider label="Value label percent" valueLabel={(value) => `${value}%`} defaultValue={50} />2<Slider3label="Value label exponentially scaled"4valueLabel={(value) => 2 ** value}5defaultValue={6}6min={2}7max={10}8/>9<Slider label="Value label display on" valueLabelDisplay="on" defaultValue={50} />10<Slider label="Value label display off" valueLabelDisplay="off" defaultValue={50} />
Component API
Color of the slider.
The slider's disabled state on initial render.
The slider value on initial render. Default value for the slider.
Whether the slider is disabled.
Displays error message underneath the slider component. Can be a string or a React component.
If true, the element will grow to fill available space.
This prop works only if the element is a direct child of a Stack.
The ID referenced by the global component state.
Whether the slider is inverted.
Label displayed above the slider.
Marks will be shown on the track of the slider.
Maximum value of the slider.
Minimum value of the slider.
Function that is called each time the value changes.
Function that is called when the user stops dragging the slider/changing values.
Border radius of the slider.
Adds red asterisk on the right side of label and sets required on input element
Size of the slider.
Number to increment/decrement the value by when the slider is dragged or changed using arrows.
A single function or an array of functions that validate the input value.
Selected value if using this component as a controlled component. Prefer to use the component state to get the value.
Function to generate a label for the slider.
auto: label is shown on hover and focus. on: label is always shown. off: label is never shown.
State API
Whether the slider is disabled
Sets the disabled value of the slider. If the disabled
value is not provided, the slider will be disabled
Sets the value of the slider
The number currently selected by the slider