Skip to content
garn

Slider

A draggable track for choosing a number or a range.

Stablev0.4.2added in v0.1.0@garn/ui/slider
On this page

Default

A single-value slider with a label.

Sizing

Thumb/track scale — fixed --garn-box-* geometry; intentionally not affected by density (the handle is a hit target).

States

Interactive states, toggled live.

Installation

garn is copy-in — the garn CLI writes this component's source into your project, so you own and can edit it. It resolves any base files and installs the npm dependencies below for you.

terminal
npx garn-ui add slider
First time? Set up garn in your project
Registry
slider
Deps
@radix-ui/react-sliderclass-variance-authority
Registry deps
utils

Import

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

Props

The component's public props and their types.

size
Description
No description.
Type
"lg" | "md" | "sm"
Default
md

Plus 293 inherited native HTML attributes.

Styling

Target these data-slots and states, and remap these tokens, to restyle without forking the component.

[data-slot="slider"]

States

SelectorState
:focus-visiblefocus-visible
[data-disabled]disabled
PropertyTokenTier
thumbSize--garn-box-mdsemantic · identity
ring--garn-ringbrandablesemantic

Private instance vars (never externalize): --st--tk

When to use

Let users pick a number (or a range) where the approximate position matters more than an exact figure — volume, brightness, a price range.

Reach for something else when

  • A precise numeric entry (use a number input)
  • an on/off (use switch)
  • a few discrete choices (use radio-group)
  • progress display (use progress).

Overview

Slider lets a person pick a number — or a range, with one thumb per value — where the approximate position matters more than an exact figure: volume, brightness, a price band. The filled range gives instant feedback on how far along the value sits. When the precise number is what matters (a quantity, a price to the cent), a number field is clearer; for a few discrete choices, use a RadioGroup or Select.

Guidelines

Give the slider an accessible name and visible value. A bare track tells a screen-reader user nothing — wire a Label and surface the current value (a readout or tooltip) so the number isn't hidden in the handle position. For a range, label both thumbs ("minimum"/"maximum").

Match step and bounds to the real range. Choose a step that makes every reachable value sensible and set min/max to the true limits; arrow keys nudge by one step, so a too-fine step makes keyboard use tedious. Keep the track wide enough to be draggable on touch.

Don't use a slider for precision or for two states. Exact entry → a number input beside it; on/off → a Switch. Avoid long sliders where a 1px drag changes the value a lot — pair coarse dragging with keyboard fine-tuning.

Best practices

Do
  • Give the slider an accessible label; set sensible min/max/step.
  • Pass two values for a range, and label each thumb.
  • Show the current value nearby when the exact number matters.
Don't
  • Don't use a slider when an exact value is required — pair it with a number input or use one.
  • Don't leave it unlabeled.
  • Don't use it to show progress — that's the progress bar.

Content guidelines

  • Give the slider a label that names what it controls (“Volume”, “Price range”).
  • Show the current value and units nearby when the exact number matters.
  • Label the ends or each thumb when min/max or the handles aren't self-evident.

Troubleshooting

value/defaultValue type errors or no thumb appears.

Cause. Slider values are arrays, not numbers.

Fix. Pass an array — defaultValue={[50]} (single) or value={[20, 80]} (range).

Screen readers announce the slider with no name.

Cause. No accessible label.

Fix. Add aria-label (or associate a <label>); for ranges, label each thumb.

Accessibility

Role
slider
ARIA APG
slider
Focus
1px ring on the focused thumb.

Accessibility requirements

warn

Give the slider an accessible name (aria-label or a <label>).

when the Slider has no aria-label / aria-labelledby / associated <label>

Keyboard

ArrowLeftArrowDownDecrease by one step.
ArrowRightArrowUpIncrease by one step.
HomeEndJump to min / max.
PageUpPageDownStep by a larger increment.
A2.1.1KeyboardAA2.4.7Focus VisibleA4.1.2Name, Role, Value
  • Each thumb is role=slider with aria-valuenow/min/max; give the control an accessible name (aria-label or a <label>).
  • For a range, label the thumbs (e.g. aria-label "Minimum"/"Maximum") so they're distinguishable.