Slider
The Slider component implements a theme-able <input type="range"/> replacement. It presents controls for specifying an array of numeric values by dragging them along a track.
Examples
This is just an example Slider component, designed in the Plain Kit project. You have total freedom to design Plume components exactly as you'd want them to be, with your own unique variants and behaviors.
Switch to a different kit:
The example Slider shown here is just one way to build a Slider using Plume’s useSlider hook. There is no “one way” to render a Slider — in fact, out of the basic form controls, Slider presents the most opportunity for customization — should the thumbs look different as you drag? Should you label each thumb one by one? Should you show a tooltip of the current thumb value? Which part of the track should you color? Should you also have an <input/> element for manually typing in a value?
The hook gives you all the information you’d need about the Slider state to build exactly the Slider that you want!
Basic Slider
Range Slider
Multi-Slider
Slider Props
| Prop | Type | Description |
|---|---|---|
label | React.ReactNode | Label for the Slider; if not specified, then aria-label or aria-labelledby should be specified. |
value | number[] | Current values for the Slider thumbs (controlled) |
defaultValue | number[] | Default values of the Slider thumbs (uncontrolled) |
minValue | number | Smallest value allowed; defaults to 0 |
maxValue | number | Largest value allowed; defaults to 100 |
step | number | How much to increment by each "tick" of the thumb, by pressing the left and right arrows. The values of the Slider must also be multiples of the step |
getThumbLabel | (index: number) => React.ReactNode | Function that returns the display label for a specific thumb. If specified, the returned value will be passed into SliderThumb as the label prop. |
getAriaThumbLabel | (index: number) => string | Function that returns the aria-label for a specific thumb. If specified, the returned value will be passed into SliderThumb as the aria-label prop. |
formatOptions | Intl.NumberFormat | Options for specifying how the values of the Slider should be formatted. Formatting is used by functions like `state.getThumbValueLabel()` |
isDisabled | boolean | Whether the Slider is disabled |
isReadOnly | boolean | Whether the Slider is read-only |
ref | PlumeSliderRef | Programmatic access to Slider |
PlumeSliderRef
| Method | Description |
|---|---|
focus() | Focuses the first thumb of this Slider |
UNSAFE_getDOMNode() | Returns the root DOM element |
SliderThumb Props
You should never have to instantiate SliderThumb yourself; Slider will instantiate one for each value it is managing.
| Prop | Type | Description |
|---|---|---|
index | number | Index of the thumb in Slider's values prop. |
isDisabled | boolean | Whether the SliderThumb is disabled |
isReadOnly | boolean | Whether the SliderThumb is read-only |
label | React.ReactNode | Label for this SliderThumb |
ref | PlumeSliderThumbRef | Programmatic access to SliderThumb |
PlumeSliderThumbRef
| Method | Description |
|---|---|
focus() | Focuses this SliderThumb |
UNSAFE_getDOMNode() | Returns the root DOM element |
Build your own!
Build your own Button, designed in Plasmic, with the useSlider and useSliderThumb hook!