<!-- source-hash: 122b219a98a8af09b0237a48cc3f85df -->
A custom slider component that wraps the native HTML range input with consistent styling and array-based value handling for React applications.

## Key Components

- **Slider** - Main forwardRef component that renders a styled range input
- **SliderProps** - Interface extending HTML input attributes with custom slider-specific props
- **handleChange** - Internal function that converts single values to array format for consistency

## Usage Example

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

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

// With custom range and step
function PriceFilter() {
  const [price, setPrice] = useState([250])
  
  return (
    <Slider
      value={price}
      onValueChange={setPrice}
      min={0}
      max={1000}
      step={50}
    />
  )
}
```

The component uses array-based values to maintain consistency with multi-handle slider patterns, cross-browser styling via CSS pseudo-selectors, and forwards all standard input props while providing a clean API for value changes.