Atoms / Slider

Slider

<Slider />Stable

Continuous or stepped value picker — single value or range. Built on Radix Slider; keyboard arrows, Home/End, and PageUp/Down all work.

import { Slider } from "@/components/upnext";

Explorer

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Value

Thumbs

State

Label

<Slider defaultValue={[50]} max={100} />

Inspector

Edit one prop at a time and see the token chain resolve. The preview re-renders, the code panel updates, and the resolves-to column shows every Tailwind class → CSS variable → final value.

Preview

Code

import { Slider } from "@/components/upnext";


<Slider />

States

<Slider defaultValue={[42]} />

Composition

4.62 s
<div>
  <div className="flex justify-between">
    <Label>40-yard dash</Label>
    <span>4.62 s</span>
  </div>
  <Slider defaultValue={[462]} min={400} max={600} step={1} />
</div>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.