@reach/slider
TypeScript icon, indicating that this package has built-in type declarations

0.18.0 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @reach/slider

Weekly Downloads

28,418

Version

0.18.0

License

MIT

Unpacked Size

127 kB

Total Files

11

Last publish

Collaborators

  • ryanflorence
  • mjackson
  • chancestrickland
  • blainekasten