---

npm i @accessible/slider

---

An accessible and versatile slider component for React. These components are touchable and keyboard navigable.

This library contains components for single-thumb sliders out of the box, though you could feasibly fashion a dual-thumb slider from what's here.

Quick Start

Check out the example on CodeSandbox

import {Slider, Track, Thumb} from '@accessible/slider'

const Component = () => (
  <Slider orientation="vertical">
    <div className="slider">
      <Track>
        <div className="track">
          <Thumb>
            <div className="thumb" />
          </Thumb>
        </div>
      </Track>
    </div>
  </Slider>
)

API

<Slider>

Creates the context for your slider and configures it. This also creates the underlying <input type='range'> component. Any props not listed below are provided to the <input>.

Props

Prop	Type	Default	Required?	Description
min	number	0	Yes	The minimum value of the slider
max	number	100	Yes	The maximum value of the slider
step	number	1	Yes	The amount the slider increases or decreases each time it is ticked
value	number	undefined	No	Makes this component controlled. This is always the value of the slider. incr, decr, set and keyboard steps have no effect.
defaultValue	number	50	No	Sets the default value of the slider
orientation	"horizontal" | "vertical"	"horizontal"	Yes	Sets the orientation of the slider. When horizontal the minimum value is on the left, max on the right. When vertical, the minimum value is on the bottom and the max is on the top.
disabled	boolean	false	No	Disables the slider incr, decr, set, and keyboard controls. You can still update the slider's value using the value prop.
onChange	(value?: number) => any	undefined	No	Called each time the value changes.

<Track>

This component attaches event handlers to its child that make it act like a native <input type="range"> track. It is your responsibility to style it.

Props

Prop	Type	Default	Required?	Description
children	React.ReactElement	undefined	Yes	Provides events to its child component that control the state of the slider's value depending on the current drag/click position.

<Thumb>

This component adds styles to its child that update the child's position within a track based upon the progress of the slider i.e. (value - min) / (max - min).

Props

Prop	Type	Default	Required?	Description
children	React.ReactElement	undefined	Yes	The child component you want to add progress styles to.

useSlider()

A hook that provides the slider's SliderContext

SliderContextValue

interface SliderContextValue {
  incr: (by?: number) => void
  decr: (by?: number) => void
  set: (value: number) => void
  value: number
  min: number
  max: number
  step: number
  focused: boolean
  disabled: boolean
  orientation: 'horizontal' | 'vertical'
  inputRef: React.MutableRefObject<HTMLInputElement | null>
}

useValue()

A hook that returns the slider's current value

useProgress()

A hook that returns the value of (value - min) / (max - min)

useOrientation()

A hook that returns the slider's current orientation

useFocused()

A hook that returns true if the slider is focused

useDisabled()

A hook that returns true if the slider is disabled

useControls()

A hook that provide's the slider's incr, decr, and set functions

LICENSE

MIT