Volume25%
0%50%100%

Slider Component

A slider input component that allows users to select values within a range.

  • Built on top of Radix UI's Slider primitive
  • Customizable range and steps
  • Support for single value and range values
  • Accessible design with keyboard navigation

Installation

The Slider component is part of our UI library. You can import it directly from the components directory.

Usage

Here is how to use the Slider component in your project.

React TSX
1import { Slider } from "@/components/modern-ui/slider"

React TSX
1<Slider defaultValue={[50]} max={100} step={1} />

Examples

Default Slider

Slider With Value Display

Range Slider

API Reference

Properties

PropertyTypeDefaultDescription
valuenumber[]-The controlled value of the slider. Must be used with onValueChange
defaultValuenumber[][0]The default value of the slider
minnumber0The minimum value for the range
maxnumber100The maximum value for the range
stepnumber1The step value for the slider
orientation'horizontal' | 'vertical''horizontal'The orientation of the slider
disabledbooleanfalseWhether the slider is disabled
onValueChange(value: number[]) => void-Event handler called when the value changes
onValueCommit(value: number[]) => void-Event handler called when the value changes and interaction ends

Accessibility

The slider component follows the WAI-ARIA Slider Pattern, ensuring keyboard navigation and screen reader compatibility.

  • Supports keyboard navigation with arrow keys
  • Provides appropriate ARIA labels
  • Implements proper focus management