Slider

An input where the user selects a value from within a given range. Built on top of Radix UI Slider primitive.

Installation

npm install @darksnow-ui/slider

Peer Dependencies

npm install react react-dom

Usage

import { Slider } from "@darksnow-ui/slider"
import { useState } from "react"

export function SliderExample() {
  const [value, setValue] = useState([50])

  return (
    <div className="space-y-4">
      <Slider
        value={value}
        onValueChange={setValue}
        max={100}
        step={1}
        className="w-[60%]"
      />
      <div className="text-sm text-theme-content-muted">
        Value: {value[0]}
      </div>
    </div>
  )
}

Props

| Prop | Type | Default | Description | |----------------|-------------------|---------|--------------------------------| | value | number[] | - | Controlled value(s) | | defaultValue | number[] | [0] | Default value(s) | | onValueChange | function | - | Called when value changes | | min | number | 0 | Minimum value | | max | number | 100 | Maximum value | | step | number | 1 | Step increment | | orientation | "horizontal" | "vertical" | "horizontal" | Slider orientation | | disabled | boolean | false | Disables the slider | | className | string | - | Additional CSS classes |

Examples

Basic Slider

<Slider defaultValue={[33]} max={100} step={1} />

Range Slider

function RangeSlider() {
  const [value, setValue] = useState([20, 80])

  return (
    <div className="space-y-4">
      <Slider
        value={value}
        onValueChange={setValue}
        max={100}
        step={1}
        className="w-[60%]"
      />
      <div className="text-sm text-theme-content-muted">
        Range: {value[0]} - {value[1]}
      </div>
    </div>
  )
}

Vertical Slider

<Slider
  orientation="vertical"
  defaultValue={[33]}
  max={100}
  step={1}
  className="h-[200px]"
/>

Volume Control

function VolumeControl() {
  const [volume, setVolume] = useState([50])

  return (
    <div className="flex items-center space-x-4">
      <VolumeXIcon className="h-4 w-4" />
      <Slider
        value={volume}
        onValueChange={setVolume}
        max={100}
        step={1}
        className="flex-1"
      />
      <Volume2Icon className="h-4 w-4" />
      <span className="text-sm w-8">{volume[0]}</span>
    </div>
  )
}

Price Range Filter

function PriceRangeFilter() {
  const [priceRange, setPriceRange] = useState([100, 500])

  return (
    <div className="space-y-4">
      <div className="flex justify-between text-sm font-medium">
        <span>Price Range</span>
        <span>${priceRange[0]} - ${priceRange[1]}</span>
      </div>
      <Slider
        value={priceRange}
        onValueChange={setPriceRange}
        max={1000}
        min={0}
        step={10}
        className="w-full"
      />
      <div className="flex justify-between text-xs text-theme-content-muted">
        <span>$0</span>
        <span>$1000</span>
      </div>
    </div>
  )
}

Accessibility

• Full keyboard support (Arrow keys, Home, End, Page Up, Page Down)
• Screen reader accessible with proper ARIA attributes
• Focus management and focus indicators
• Value announcements for screen readers

Styling

The Slider component uses DarkSnow UI design tokens:

• Track: Background track styling
• Range: Filled range indication
• Thumb: Interactive handle
• Focus: Ring outline on focus
• Disabled: Reduced opacity and disabled cursor

Best Practices

1. Appropriate step size: Choose step increments that make sense for your use case
2. Visual feedback: Provide clear visual indication of current value
3. Range limits: Set appropriate min/max values
4. Labels: Include labels or descriptions for context
5. Responsive design: Consider touch targets on mobile devices

Related Components

• Input - Text input controls
• Progress - Progress indicators