Slider

Range slider built on bits-ui. Supports single or multiple thumbs, min/max, and step.

Example

Value: 50

Props

Prop	Type	Default	Description
`value`	`number[]`	`[50]`	Current value(s) (bindable). One entry per thumb.
`onValueChange`	`(value: number[]) => void`	—	Callback when value changes
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`step`	`number`	`1`	Step increment
`disabled`	`boolean`	`false`	Disable interaction
`class`	`string`	—	Additional CSS classes

Usage

<script>
  import { Slider } from '@chrissnell/chonky-ui';
  let value = $state([50]);
</script>

<Slider bind:value min={0} max={100} step={5} />

<!-- Range slider with two thumbs -->
<Slider value={[20, 80]} />