Component

Slider

Backed by @base-ui/react/slider. Anatomy is fixed: root, label, value, control, track, indicator, thumb parts. Base UI reference.

Install

npx bambiui add slider

Import from your own project source, never from Base UI directly, and never from a published bambiui package:

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

Variants

States

Hover, active, and focus-visible are styled but cannot be shown statically. Use the component with a mouse or keyboard to verify those interaction states.

Supported states: `default`, `hover`, `focus-visible`, `dragging`, `invalid`, `disabled`.

Props

Prop	Type	Default
`orientation`	"horizontal" \| "vertical"	`"horizontal"`
`label`	ReactNode	`undefined`
`showValue`	boolean	`false`
`getThumbAriaLabel`	(index: number) => string	`undefined`
`value`	number \| number[]	`undefined`
`defaultValue`	number \| number[]	`undefined`
`onValueChange`	(value: number \| number[], details: Slider.Root.ChangeEventDetails) => void	`undefined`
`onValueCommitted`	(value: number \| number[], details: Slider.Root.CommitEventDetails) => void	`undefined`
`min`	number	`0`
`max`	number	`100`
`step`	number	`1`
`largeStep`	number	`10`
`minStepsBetweenValues`	number	`0`
`format`	Intl.NumberFormatOptions	`undefined`
`disabled`	boolean	`false`

Native props and refs supported by the underlying Base UI primitive are preserved.

Tokens

Override any of these in your theme CSS to restyle Slider:

--bambi-slider-track-size
--bambi-slider-thumb-size
--bambi-slider-control-padding
--bambi-slider-vertical-length
--bambi-slider-value-foreground
--bambi-track-background
--bambi-track-fill-background
--bambi-track-radius
--bambi-thumb-background
--bambi-thumb-border
--bambi-thumb-shadow
--bambi-label-foreground
--bambi-field-gap

Single and range

The thumb count follows the shape of the value: a number renders one thumb, and an array renders one per entry. Name each thumb with getThumbAriaLabel when there is more than one, since a single visible label cannot distinguish them.

<Slider defaultValue={40} label="Volume" showValue />

<Slider
  defaultValue={[20, 70]}
  label="Price"
  showValue
  getThumbAriaLabel={(index) => (index === 0 ? "Minimum price" : "Maximum price")}
/>

Value changes

onValueChange fires continuously while dragging; onValueCommitted fires once the interaction ends. Use the committed callback for anything expensive, such as a network request.

Layout

A horizontal slider fills its container. A vertical one falls back to --bambi-slider-vertical-length when its parent has no height, so set a height on the parent to control it. The pointer target is wider than the visible track, via --bambi-slider-control-padding.

Composition

Inside a Field, the slider picks up the field name, description, and disabled state:

Applies to notification sounds only.

Keyboard

Each thumb is its own tab stop and hosts a native range input.

Key	Behavior
`←` / `→` / `↑` / `↓`	Moves the focused thumb by `step`.
`Page Up` / `Page Down`	Moves by `largeStep`. `Shift` with `↑` or `↓` does the same.
`Home` / `End`	Jumps to `min` or `max`.

A disabled slider is removed from the tab order and ignores keyboard input.