Slider

Single-value range slider.

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

#Playground

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

Loading preview…

<Slider label="Volume" defaultValue={75} />

<Slider label="Progress" min={0} max={50} defaultValue={25} />

Prop	Type	Default	Description
`value`	`number`	—	Controlled value
`defaultValue`	`number`	—	Uncontrolled initial value
`onChange`	`(value: number) => void`	—	Change handler called when the value changes
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`step`	`number`	`1`	Step increment
`label`	`string`	—	Label text
`showValue`	`boolean`	`true`	Show current value next to label
`disabled`	`boolean`	`false`	Disable interaction
`class`	`string`	—	Additional CSS classes
`unstyled`	`boolean`	—	Remove sk-* styling classes

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