Slider

The slider lets users pick a value, or a range, by dragging a thumb along a track. Use it for volume, brightness, price ranges, and other continuous settings where quick adjustment matters more than typing an exact number.

Preview

Installation

npx shadcn@latest add @cubby-ui/slider

Usage

import { Slider, SliderLabel } from "@/components/ui/cubby-ui/slider";

<Slider>
  <SliderLabel />
</Slider>

Composition

Slider
├── SliderLabel
└── SliderValue

SliderLabel and SliderValue are optional children that render above the track, so a header row (the label and value side by side) sits directly above the slider control:

<Slider defaultValue={[50]}>
  <div className="flex items-center justify-between">
    <SliderLabel>Volume</SliderLabel>
    <SliderValue />
  </div>
</Slider>

For content below the track, render it as a sibling of Slider rather than a child (for example, a <FieldDescription> inside the enclosing <Field>).

Examples

Controlled

Use value and onValueChange to control the slider state.

Range Slider

Pass an array value to render two thumbs and select a range.

With Steps

Use step to snap to discrete values, and showSteps to mark them on the track.

With Value Display

Add SliderValue to show the current value beside the slider.

Vertical Orientation

Set orientation="vertical" to lay the slider out vertically.

Variants

Use variant to change the slider's visual style.

With Reference Scale

Render annotations like a reference scale as a sibling of Slider. Content outside the Slider root doesn't need slider context, so it skips the label/value composition rules; a SliderLabel child still keeps the visible label above the track.

Disabled State

Set disabled to prevent interaction.

Form Integration

Slider works with two submission flows. With Base UI's onFormSubmit, values come from registered Fields, so wrap each slider in <Field name="..."> (and compose with Fieldset for multi-thumb groups so each thumb keeps its own aria-label under a shared legend). With a native onSubmit, Slider's hidden input makes name sufficient on its own. The example below shows both. See the Forms guide for more patterns.

Accessibility

The slider is operable from the keyboard: focus a thumb, then use the arrow keys to adjust by step, Home/End to jump to the min and max, and PageUp/PageDown for larger increments.

Give the slider an accessible name when there is no visible SliderLabel. For a range slider, use getAriaLabel so each thumb gets its own label.

<Slider
  defaultValue={[20, 60]}
  getAriaLabel={(index) => (index === 0 ? "Minimum price" : "Maximum price")}
/>

API Reference

Slider

Additional Props

Slider inherits all props from Base UI Slider, including orientation, step, value, defaultValue, onChange, and accessibility props.