1  import React from 'react'
 2  
 3  export interface SliderProps {
 4    label: string
 5    id: string
 6    value?: number
 7    onChange?: (value: number) => void
 8    min?: number
 9    max?: number
10    step?: number
11    showValue?: boolean
12    className?: string
13  }
14  
15  export const Slider: React.FC<SliderProps> = ({
16    label,
17    id,
18    value = 0,
19    onChange,
20    min = 0,
21    max = 100,
22    step = 1,
23    showValue = true,
24    className = '',
25  }) => {
26    return (
27      <div className={`flex flex-col gap-2 ${className}`}>
28        <div className="flex justify-between items-center">
29          <label
30            htmlFor={id}
31            className="text-sm font-medium text-gray-700 dark:text-gray-200"
32          >
33            {label}
34          </label>
35          {showValue && (
36            <span className="text-sm font-semibold text-blue-600 dark:text-blue-400 min-w-12 text-right">
37              {value}
38            </span>
39          )}
40        </div>
41        <input
42          type="range"
43          id={id}
44          value={value}
45          onChange={(e) => onChange?.(Number(e.target.value))}
46          min={min}
47          max={max}
48          step={step}
49          className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-600 dark:accent-blue-500"
50        />
51        <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400">
52          <span>{min}</span>
53          <span>{max}</span>
54        </div>
55      </div>
56    )
57  }