Slider

SkeletonSpinner

Pick a value or a range by dragging along a track.

Volume40
Price$20 – $80
Disabled

Installation

pnpm add krz-ui

Usage

import { Slider } from "krz-ui";
<Slider label="Volume" value={volume} onValueChange={setVolume} showValue />

<Slider label="Price" defaultValue={[20, 80]} formatValue={(v) => `$${v}`} showValue />

API Reference

PropTypeDescription
value / defaultValuenumber | [number, number]One value, or a range with two thumbs.
onValueChange(value) => voidCalled while dragging.
onValueCommit(value) => voidCalled once when dragging stops.
min / max / stepnumberDefaults to 0 / 100 / 1.
label / showValue / formatValueReactNode / boolean / (v) => stringLabel and value display.
disabledbooleanDisable the slider.
className / style / ref—All go to the outer element. See Customization.
classNames{ header?, label?, value?, track?, range?, thumb? }Extra classes for inner parts.