@reach/slider
A UI input component where the user selects a value from within a given range. A Slider has a handle that can be moved along a track to change its value. When the user's mouse or focus is on the Slider's handle, the value can be incremented with keyboard controls.
import {
Slider,
SliderInput,
SliderTrack,
SliderRange,
SliderHandle,
SliderMarker,
} from "@reach/slider";
import "@reach/slider/styles.css";
function Example() {
return <Slider min={0} max={200} step={10} />;
}
function ExampleComposed() {
return (
<SliderInput min={0} max={200} step={10}>
<SliderTrack>
<SliderRange />
<SliderHandle />
</SliderTrack>
</SliderInput>
);
}