Slider

Ползунок. Бесплатно, MIT · Формы и ввод › Флажки и ползунки

Установка

npx valyro-cli@latest add slider

npx shadcn@latest add https://valyro.xyz/r/slider.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Slider } from 'valyro-ui';

Prop	Type	Default
`value`	`T`		A number for one thumb, a `[from, to]` tuple for a range.
`defaultValue`	`T`		Initial `value` when uncontrolled.
`onValueChange`	`(value: SliderWiden<T>) => void`		Called with the new `value` when it changes.
`min`	`number`	`0`	Lowest value, at the start of the track; steps are counted from it.
`max`	`number`	`100`	Highest value, at the end of the track.
`step`	`number`	`1`	Snapping interval; 0 = continuous.
`marks`	`SliderMark[]`		Ticks on the track, with optional labels below it.
`tooltip`	`boolean \| 'always'`	`false`	Value bubble over the thumb: `true` while hovered/focused/dragged, `'always'` permanently.
`formatValue`	`(value: number) => string`		Text for the bubble and aria-valuetext. Default: the number formatted for `locale`.
`locale`	`string`		Locale for the default `formatValue` (default: the ThemeProvider's, then the browser's).
`thumbLabels`	`[string, string]`		Words appended to the accessible name of each range thumb, e.g. "Price minimum".
`disabled`	`boolean`	`false`	Ignores pointer and keyboard input, takes the thumbs out of Tab order and leaves the value out of form data.
`name`	`string`		Submits the value(s) with the surrounding form through hidden inputs.
`invalid`	`boolean`	`false`	Error state, e.g. from a FormField: aria-invalid on the thumbs (an explicit `aria-invalid` wins).