<!-- source-hash: 5f763440ae5688cbf4b2ead477f7a1a0 -->
A React slider component built on Radix UI primitives with custom styling and accessibility features.

## Key Components

- **Slider**: Main component that renders a horizontal slider with track, range, and thumb elements
- **SliderPrimitive**: Radix UI slider primitives providing accessibility and behavior
- **cn**: Utility function for conditional className merging

## Usage Example

```typescript
import { Slider } from "./components/slider"
import { useState } from "react"

function VolumeControl() {
  const [volume, setVolume] = useState([50])
  
  return (
    <div className="w-64 space-y-4">
      <label>Volume: {volume[0]}%</label>
      <Slider
        value={volume}
        onValueChange={setVolume}
        max={100}
        min={0}
        step={1}
        className="w-full"
      />
    </div>
  )
}

// Range slider example
function PriceRange() {
  const [price, setPrice] = useState([20, 80])
  
  return (
    <Slider
      value={price}
      onValueChange={setPrice}
      max={100}
      min={0}
      step={1}
    />
  )
}
```

The component includes built-in styling for track, range, and thumb elements with focus states, disabled states, and smooth transitions. It supports both single-value and multi-value (range) configurations through the Radix UI foundation.