Slider

Preview

Installation

npx shadcn@latest add @cubby-ui/slider

Usage

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

<Slider>
  <SliderLabel />
</Slider>

Children Layout

Children render above the track, not below. This enables the common pattern of a header row (SliderLabel + SliderValue side by side) sitting directly above the slider control:

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

If you want content below the track, render it as a sibling of the Slider instead of a child — for example, a <FieldDescription> inside the enclosing <Field>.

Examples

Controlled

Manage slider state externally.

Range Slider

Select a range with two handles.

With Steps

Snap to discrete step values.

With Value Display

Show the current value alongside the slider.

Vertical Orientation

Display slider vertically.

Variants

Apply different visual styles.

With Reference Scale

Render annotations (like a reference scale) as a sibling of Slider — content outside the Slider root doesn't need the slider's context, so it avoids the label/value composition rules. A SliderLabel child keeps the visible label above the track.

Disabled State

Prevent interaction with disabled slider.

Form Integration

Slider works with two submission flows. With Base UI's onFormSubmit, values come from registered Fields — 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.

API Reference

Slider

Additional Props

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