Slider

Interactive UI element that lets users select a single value or a range within a defined minimum and maximum. Typically presented as a horizontal track with a draggable handle.

  • Full Radix API preserved

  • Increased touch target

  • Can be controlled or uncontrolled

  • Supports multiple thumbs

  • Supports a minimum value between thumbs

  • Supports touch

  • Full keyboard navigation

  • Supports horizontal and vertical orientations

Pure UI

Installation

Loading...

Usage

// Option #1. Simple usage:
<Slider />

// Option #2. Full Radix API for additional control:
<SliderRoot>
  <SliderTrack>
    <SliderRange />
  </SliderTrack>
  <SliderThumb />
</SliderRoot>

Examples

Dual

Ticks

Number Flow

Vertical

Form

API Reference

Slider

Support all Radix Root API

Root

Support all Radix Root API

Track

Support all Radix Track API

Range

Support all Radix Range API

Thumb

Support all Radix Thumb API

⮠ PrevSkeleton
Next ⮡Switch