@reach/slider

@reach/slider

npm i @reach/slider

Readme

@reach/slider

Stable release MIT license

Docs | Source | WAI-ARIA

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>
    );
}

Jump To