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 (
)
}
// Range slider example
function PriceRange() {
const [price, setPrice] = useState([20, 80])
return (
)
}
```
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.