Usage no npm install needed!

<script type="module">
  import reachSlider from 'https://cdn.skypack.dev/@reach/slider';
</script>

README

@reach/slider

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