02 / Tactile controls
Elastic Slider
A precise slider with a small amount of give at either end. The current value stays visible and the control works without a pointer.
Install
Copy the source into your project, or keep it behind a package.
Copy the source into your project and make it yours.
Usage
export function Volume() {
return (
<ElasticSlider
label="Notification volume"
defaultValue={68}
name="volume"
/>
)
}API
labelReactNodeThe visible and accessible label.defaultValuenumberThe initial uncontrolled value. Defaults to 50.valuenumberThe current value when controlled.onValueChange(value: number) => voidRuns while the value changes.onValueCommitted(value: number) => voidRuns when interaction finishes.min, max, stepnumberRange and increment settings.formatValue(value: number) => stringFormats the visible value.Accessibility
The control uses Base UI slider behavior and a native output for the visible value. It supports pointer, touch, and keyboard input. End feedback is removed when reduced motion is enabled.