Folio

Components

Slider

An input where the user selects a value from within a given range. Drag a thumb along the track to pick one value, on either axis.

Preview

Volume50

Rendered with live Folio tokens -- the track, range fill, and thumb remap on theme change, no dark: classes. Drag the thumb to update the value.

Variants

<Slider defaultValue={[50]} max={100} step={1} />
<Slider defaultValue={[20]} min={10} max={40} step={1} />
<div className="flex h-44 gap-8">
  <Slider defaultValue={[50]} orientation="vertical" />
  <Slider defaultValue={[75]} orientation="vertical" />
</div>
<Slider defaultValue={[40]} max={100} step={10} />

The thumb selects one value. Set min and max to change the scale. Set orientation="vertical" (with a height) to stand it up, and step to snap to coarser increments.

States

<Slider defaultValue={[50]} max={100} step={1} />
<Slider defaultValue={[40]} disabled />

The default slider is draggable and keyboard accessible (arrow keys move by step). A disabled slider dims to 50% and stops responding.

API

Prop
Type
Default
Description
defaultValue / value
number[]
undefined
Thumb position as a one-entry array. The slider renders one thumb. value makes it controlled (pair with onValueChange).
min
number
0
Lowest selectable value.
max
number
100
Highest selectable value.
step
number
1
Increment between stops as the thumb moves.
orientation
"horizontal" | "vertical"
"horizontal"
Axis. Vertical needs a height on the root (e.g. h-44).
disabled
boolean
false
Dims the slider to 50% and blocks interaction.
onValueChange
(value: number[]) => void
undefined
Fires as the thumb moves -- use it to drive a controlled value.

Don't and Do

Don't

Don't use a slider when the exact value matters -- a precise number is better typed into an Input. And don't hide the selected value; show it nearby so the user knows where they've landed.

Do
<Slider
  value={value}
  onValueChange={setValue}
  max={100}
  step={1}
/>
import { Slider } from "@/components/shadcn/slider";

export function VolumeSlider() {
  const [value, setValue] = useState([50]);
  return (
    <Slider value={value} onValueChange={setValue} max={100} step={1} />
  );
}
API matches @distylai/toolkit-ui -- a single Slider built on Radix, with one thumb. The track, range fill, and thumb use Folio tokens, and the track follows orientation.