Slider

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add slider

Usage#

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

export function Example() {
  return <Slider defaultValue={[60]} aria-label="Volume" />
}

Anatomy#

import {
  Slider,
  SliderInput,
  SliderInputValue,
  SliderInputTrack,
  SliderInputLabel,
} from "@/components/ui/slider"

<Slider />

<SliderInput>
  <SliderInputValue />
  <SliderInputTrack>
    <SliderInputLabel />
    <SliderInputValue />
  </SliderInputTrack>
</SliderInput>

Sizes#

Three sizes scale the track thickness and thumb diameter together: sm, md (default), and lg.

Variants#

The variant tints the range, thumb border, and tooltip as one. default uses the form-control primary; brand picks up the active accent; and the status fills carry domain meaning.

Range#

Pass two values and you get a two-thumb range, no extra component. Each thumb drags independently and carries its own value bubble.

Steps#

step snaps the thumb to discrete stops. Pair it with min/max and your own labels for a scaled control.

Vertical#

Set orientation="vertical" and give the root a height. The same recipe styles both axes via data-orientation.

Square#

shape="square" squares the rail and gives the thumb a fader-cap profile; corners stay concentric with the rail.

Equalizer#

Square + vertical turns the slider into a fader. A row of them reads as an equalizer; each is an independent control.

Disabled#

disabled dims the whole control and stops all interaction.

Controlled#

Drive the slider from state with value and onValueChange (both arrays), or leave it uncontrolled with defaultValue.

In a settings card#

The common shell: a labelled row with the live value trailing, the slider beneath.

Slider input#

SliderInput is the inspector slider: an editable number box beside a slim rail with a pill thumb, the pair you find in video, design and audio tools. The rail opens to the full control height while hovered, dragged or focused. It edits one number (not an array), and the row shares the 32/36/40 height scale with Input, so a column of them lines up with the rest of a panel.

• Click or drag anywhere on the track; arrows, Shift+arrows, Home and End work once it has focus.
• Drag sideways on the number box to scrub it. A plain click edits it with the number selected.
• While typing, arrows step (Shift steps ×10), Enter commits and Escape reverts. Out-of-range input clamps and snaps to step on commit.
• Inside a Field the label focuses the box and names the thumb, no wiring needed.
• Drag past either end and the rail stretches a few pixels, then eases back on release (not with reduced motion).

Slider input sizes#

size sets the height, the same scale as every form control: sm 32px, md 36px and lg 40px. Unsized, it follows density the way Input does. Typed text stays 14px at every size.

Slider input variants#

default keeps the fill and pill neutral, because an inspector is a wall of these and colour on every row would shout. brand tints them with the accent for the one setting that matters.

Only the parts you need#

With no children the root renders both halves. Compose SliderInputValue and SliderInputTrack yourself to add a suffix unit, or drop either one: the track alone is a compact fader, the box alone a scrubbable number.

Label inside the track#

Give SliderInputTrack children and the track becomes the field, the slider you find in generation panels. SliderInputLabel sits inside on the left and SliderInputValue turns into a read-only readout on the right, while the fill paints as a raised chip that ends at the pill. Drag anywhere on it.

• The text insets match Input's side padding, so a column of these lines up with the inputs and selects around it.
• The pill fades while it passes under the label or the readout, and ticks fade out around the text.
• Name the stops of a discrete scale with formatValue on the root: the readout shows the name and the thumb announces it.
• Both parts are optional. A label alone or a readout alone is still a field.

Label inside: sizes and variants#

The field layout keeps the same size and variant. Inside a field the pill stays a quiet grey next to the text, and brand tints the chip and the pill.

Ticks#

ticks on the track marks the stops: true for one at every step, or a number for one every that many units. The ends get no mark, since the rail's edges already show them. Inside the fill, marks only show while the track is hovered, dragged or focused. Past 64 marks none are drawn.

Decimal steps#

The box shows as many decimals as step has, and everything you type or scrub snaps to that grid. Drive it with value and onValueChange (plain numbers); onValueCommit fires once when a drag, scrub or edit ends.

Slider input disabled#

disabled (or a disabled Field) dims both halves together and stops every interaction.

API reference#

FAQ#