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:

Plain 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

PropTypeDescription
labelReact.ReactNodeLabel for the Slider; if not specified, then aria-label or aria-labelledby should be specified.
valuenumber[]Current values for the Slider thumbs (controlled)
defaultValuenumber[]Default values of the Slider thumbs (uncontrolled)
minValuenumberSmallest value allowed; defaults to 0
maxValuenumberLargest value allowed; defaults to 100
stepnumberHow 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.ReactNodeFunction 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) => stringFunction that returns the aria-label for a specific thumb. If specified, the returned value will be passed into SliderThumb as the aria-label prop.
formatOptionsIntl.NumberFormatOptions for specifying how the values of the Slider should be formatted. Formatting is used by functions like `state.getThumbValueLabel()`
isDisabledbooleanWhether the Slider is disabled
isReadOnlybooleanWhether the Slider is read-only
refPlumeSliderRefProgrammatic access to Slider

PlumeSliderRef

MethodDescription
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.

PropTypeDescription
indexnumberIndex of the thumb in Slider's values prop.
isDisabledbooleanWhether the SliderThumb is disabled
isReadOnlybooleanWhether the SliderThumb is read-only
labelReact.ReactNodeLabel for this SliderThumb
refPlumeSliderThumbRefProgrammatic access to SliderThumb

PlumeSliderThumbRef

MethodDescription
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!