forms
Slider
A draggable range control with full keyboard support and step snapping.
Examples
Value and steps
`formatValue` shapes both the visible number and the one `aria-valuetext` announces, so the two cannot disagree.
Arrow keys step by 1, Page Up and Page Down by 10.
Own the source
Noksha ships as a package and as copy-paste source. Take the files and they are yours to change. These are read from the generated registry, so they are exactly what the library ships — never a paraphrase of it.
Take these files, and field, internal helpers along with them — the imports below point at them. Or let the CLI do it: npx @noksha-ui/cli add slider writes them, follows the same dependency graph, and fixes up the imports.
export { Slider, sliderVariants } from './slider.js';
export type { SliderProps, SliderSize, SliderTone } from './slider.types.js';API reference
Accepted values
- SliderSize
smmdlg
SliderProps
Also accepts everything from Omit<
React.InputHTMLAttributes<HTMLInputElement>,
'size' | 'type' | 'value' | 'defaultValue' | 'onChange'
>.
| Prop | Type | Description |
|---|---|---|
| value | number | — |
| defaultValue | number | — |
| onValueChange | (value: number) => void | — |
| min | number | — |
| max | number | — |
| step | number | — |
| size | SliderSize | — |
| tone | SliderTone | — |
| invalid | boolean | — |
| showValue | boolean | Show the current value beside the track. |
| formatValue | (value: number) => string | Formats the displayed value, and the one announced by `aria-valuetext`. |
| containerClassName | string | Classes for the wrapper; `className` styles the track itself. |