🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Slider

A draggable input control that allows users to select a value from a range.

Sliders are used when users need to select a numeric value within a defined range, such as adjusting volume, brightness, price ranges, or any continuous values. They provide visual feedback showing the current value position within the available range. Sliders can be configured as single-value or range sliders with multiple thumbs.

Built on top of Radix UI's Slider primitive with full keyboard navigation (Arrow keys to adjust value, Home/End for min/max), focus management, and accessibility support including proper ARIA attributes and roles.

Example

Installation


npm install @strongtie/design-system

import { Slider } from "@strongtie/design-system/slider"

Props

All components extend Radix UI primitives. See the Radix UI documentation for all available props.

Examples

Disabled

Disabled Slider

"use client"

import { Label } from "@strongtie/design-system/label"
import { Slider } from "@strongtie/design-system/slider"

export function SliderDisabled() {
  return (
    <div className="flex flex-col gap-4">
      <Label htmlFor="disabled-slider">Disabled Slider</Label>
      <Slider
        id="disabled-slider"
        defaultValue={[50]}
        max={100}
        step={1}
        disabled
        className="w-[300px]"
      />
    </div>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Additional Classes

Other CSS classes used by this component:

slider
slider-range
slider-thumb
slider-track

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI slider Documentation

Skeleton Switch

On This Page

Example Installation Props Examples Disabled Styling Additional Classes Accessibility Resources

Contribute