Slider

Slider over native range inputs: thin accent track, white knob that lifts while held. One value or two for a range; keyboard, forms, touch and Field wiring come from the platform.

npx @kznlabs/labsui add slider

Price

$40 – $180

Clip quality (Pro)

"use client";import { useState } from "react";import { Field } from "@/components/ui/field";import { Slider } from "@/components/ui/slider";export function PriceFilter() {  const [price, setPrice] = useState([40, 180]);  return (    <Field label="Price" description={`$${price[0]} – $${price[1]}`}>      <Slider        value={price}        onValueChange={setPrice}        min={0}        max={250}        step={5}        name="price"      />    </Field>  );}

<Slider>

Slider over native range inputs: keyboard, forms, touch and screen readers work as the browser does. Thin accent track, white knob that lifts while held. Two values = range.

aria-describedby
string
Ids of hint or error text; Field fills it in.
aria-invalid
boolean
Error styling; Field sets it from error.
defaultValue
number[]
Values at first render (uncontrolled).
disabled
boolean
Blocks dragging and keys.
id
string
Id of the first thumb; Field fills it in.
labels
string[]
Accessible names per thumb; defaults to "Minimum" / "Maximum" for a range.
max
number
Highest value.
min
number
Lowest value.
name
string
Submitted per thumb: name (one value) or name twice (range).
onValueChange
(value: number[]) => void
Called with every thumb's value while dragging.
step
number
Increment for drag and arrow keys.
value
number[]
One value, or two for a range (e.g. a price filter).

Prop	Type	Default
`aria-describedby` Ids of hint or error text; Field fills it in.	`string`	—
`aria-invalid` Error styling; Field sets it from `error`.	`boolean`	—
`defaultValue` Values at first render (uncontrolled).	`number[]`	—
`disabled` Blocks dragging and keys.	`boolean`	—
`id` Id of the first thumb; Field fills it in.	`string`	—
`labels` Accessible names per thumb; defaults to "Minimum" / "Maximum" for a range.	`string[]`	—
`max` Highest value.	`number`	—
`min` Lowest value.	`number`	—
`name` Submitted per thumb: `name` (one value) or `name` twice (range).	`string`	—
`onValueChange` Called with every thumb's value while dragging.	`(value: number[]) => void`	—
`step` Increment for drag and arrow keys.	`number`	—
`value` One value, or two for a range (e.g. a price filter).	`number[]`	—

* required. Every component also takes className.