https://github.com/accessible-ui/slider
🅰 An accessible and versatile slider component for React that uses a native <input type=range> for focus management
https://github.com/accessible-ui/slider
a11y a11y-slider accessibility accessible accessible-react accessible-slider focus-management react-accessibility slider slider-component
Last synced: 3 months ago
JSON representation
🅰 An accessible and versatile slider component for React that uses a native <input type=range> for focus management
- Host: GitHub
- URL: https://github.com/accessible-ui/slider
- Owner: accessible-ui
- License: mit
- Created: 2019-12-29T01:50:15.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:23:08.000Z (almost 3 years ago)
- Last Synced: 2025-01-02T22:38:46.257Z (9 months ago)
- Topics: a11y, a11y-slider, accessibility, accessible, accessible-react, accessible-slider, focus-management, react-accessibility, slider, slider-component
- Language: TypeScript
- Homepage: https://codesandbox.io/s/accessibleslider-example-vi94o
- Size: 1.78 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
<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](https://codesandbox.io/s/accessibleslider-example-vi94o)
```jsx harmony
import {Slider, Track, Thumb} from '@accessible/slider'
const Component = () => (
)
```
## API
### ``
Creates the context for your slider and configures it. This also creates the underlying
`` component. Any props not listed below are provided to the ``.
#### 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. |
### ``
This component attaches event handlers to its child that make it act like a native `` 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. |
### ``
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
}
```
### `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