accessible-ui
<Slider>
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
`jsx harmony
import {Slider, Track, Thumb} from '@accessible/slider'
const Component = () => ( <Slider orientation="vertical">
## 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 | <code>"horizontal" | "vertical"</code> | `"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)
### `SliderContextValue`
```typescript jsx
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