Skip to content

Slider

A value or range on a scale. Arrows step, Page Up/Down take big steps, Home/End jump to the ends. The 20px thumb has a 44px hit area.

Sourcecomponents/slider.tsx
100

50% to 200%.

20 – 80

Usage

Slider usage
import { useState } from "react";import { Field, FieldLabel } from "@/components/field";import { Slider } from "@/components/slider";
export function SliderUsage() {  const [range, setRange] = useState([20, 80]);  return (    <Field>      <FieldLabel>Price</FieldLabel>      <Slider value={range} onValueChange={(value) => setRange(value as number[])} min={0} max={100} step={5} showValue />    </Field>  );}

When to use

Use when

A value or range where position matters more than the exact number: volume, zoom, a price range

Don’t use when

An exact number (use Input); fewer than about five steps (use Radio Group or Toggle Group)