Slider
Sliders allow users to view and select a value (or range) from the range along a bar.
Import
import { Slider } from "@cfa/react-core";Live Editor
Guidelines
When to use
- Slider is for adjusting a value along a continuous or stepped range when seeing position in the range helps, such as volume, brightness, image filters, or price bounds.
Do
- Show the current value beside or above the thumb.
- Pair with NumberInput when people need to type an exact value.
- For the range variant, two thumbs cannot cross. Show both min and max values.
Avoid
- Using Slider for discrete options with named labels. Use Select or RadioGroup.
Examples
Controlled
To create a controlled Slider, pass the value and onChange props to the Slider.Root.
Description
Use the Slider.Description to add helper text to the Slider.
Disabled
Pass the isDisabled prop to the Slider.Root to disable the SLider.
Output
By default the self-closing Slider.Output component will either display the single value if a normal slider, or a ranged value if using a range slider.
Custom Output
To use a custom output, pass the Slider.Output children. The Slider internally tracks state for values and getThumbValueLabel.
Marks
To display incremental marks in the Slider, use the Slider.Marks sub-component.
We suggest to not use the Slider.Output component when using marks, since the marks will indicate the selected value.
Custom Marks & Output
To display custom labels, use the Slider.MarkLabels component and use the formatter prop.
Range
To create a range Slider, pass an array to the defaultValue or value prop and use two Slider.Thumb components, passing the array’s position to the index props of the respective thumbs.
The first thumb should have index={0} and the second thumb should have index={1}.
Limit the number of Slider.Thumbs to two.