RangeSlider

Dual-handle range slider.

import { RangeSlider } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

<RangeSlider label="Price Range" defaultValue={[ 20, 80 ]} />

<RangeSlider
  label="Budget"
  min={0}
  max={1000}
  step={50}
  defaultValue={[ 200, 800 ]}
/>

Prop	Type	Default	Description
`value`	`[number, number]`	—	Controlled [min, max] values.
`defaultValue`	`[number, number]`	—	Default [min, max] values.
`onChange`	`(value: [number, number]) => void`	—	Callback when value changes.
`min`	`number`	`0`	Minimum allowed value.
`max`	`number`	`100`	Maximum allowed value.
`step`	`number`	`1`	Step increment for dragging.
`minGap`	`number`	`0`	Minimum gap between the two handles.
`label`	`string`	—	Label text displayed above the slider.
`showValues`	`boolean`	`true`	Show current min-max values.
`disabled`	`boolean`	`false`	Disable interaction.
`class`	`string`	—	Additional CSS classes.

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.