4AF Components

Fields and selection

Slider

A Base UI range control with multiple thumb styles, labels, ticks, sizing, and an optional live value tooltip.

View as Markdown
⠋

Install

npx shadcn@latest add https://4af.selfsimilar.dev/r/slider.json

Usage

import { Slider } from "@/components/ui/slider";

<Slider aria-label="Volume" defaultValue={60} showValueTooltip />

<Slider aria-label="Price range" range defaultValue={[20, 80]} />

<Slider aria-label="Volume" label="Volume" defaultValue={60} inlineLabel />

API

Main export: Slider

A controlled or uncontrolled numeric slider with a spring-animated fill. Optional label, showValue, showTicks, and showValueTooltip.

thumbShape
barA thin handle that stretches taller while grabbed.
circleA round thumb inside a thick rounded rail. The fill wraps the thumb and stays behind it at the minimum.
knobA small dot on a thin rail (4px at md, 2px at sm) that it overhangs. It grows by a quarter while dragged. Its rail shows the fill only, never ticks.

range renders two thumbs with a fill between them. Pass [start, end] to value or defaultValue; the range callback receives the updated tuple. Without range, the value is a single number.

Bar thumb

On the bar thumb, ticks are hidden at rest and the fill is foreground/15. While the slider is in use (hovered, dragged, or keyboard-focused), the ticks fade in and the fill steps up to foreground/20. circle and knob keep both constant.

inlineLabel moves the label and the value inside the bar, one at each end, replacing the row above it. Within 8px of either, the thumb dodges: it fades to 15% opacity and drops its grab stretch, then restores as it moves away. It never dodges at either end of the rail. The thumb carries data-dodged while dodging; under reduced motion only the fade remains. The inline value is muted-foreground at rest and foreground while the slider is in use. circle and knob ignore inlineLabel.

Value tooltip

showValueTooltip (off by default) shows the live value above the thumb while it is hovered or keyboard-focused. It stays open while dragging, follows the thumb, and closes after release once the pointer has left the thumb.

On this page