◇

Slider

4 parts

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  SliderRange,
  SliderRoot,
  SliderThumb,
  SliderTrack,
} from '@robonen/primitives/slider';

<SliderRange>
  <SliderRoot />
  <SliderThumb />
  <SliderTrack />
</SliderRange>

API Reference

SliderRange

Range

No props or events — renders its element and forwards attributes.

SliderRoot

Root

Prop	Type	Default	Description
`modelValue`?	`number[]`	—	Current value(s) for controlled mode.
`min`?	`number`	`0`	Min value.
`max`?	`number`	`100`	Max value.
`step`?	`number`	`1`	Step granularity.
`minStepsBetweenThumbs`?	`number`	`0`	Minimum step count between adjacent thumbs in range mode.
`orientation`?	`SliderOrientation`	`'horizontal'`	Orientation.
`dir`?	`SliderDirection`	`'ltr'`	Writing direction.
`inverted`?	`boolean`	`false`	Invert the direction of interaction.
`disabled`?	`boolean`	—	Disable all interaction.
`defaultValue`?	`number \| number[]`	—	Uncontrolled initial value(s). Accepts single number or array.
`name`?	`string`	—	Hidden input `name` attribute.
`required`?	`boolean`	—	Mark hidden inputs as required.

SliderThumb

Thumb

Prop	Type	Default	Description
`'aria-label'`?	`string`	—	Accessible label for this thumb.

SliderTrack

Track

No props or events — renders its element and forwards attributes.