1  import React from 'react';
 2  
 3  interface SliderProps {
 4    label: string;
 5    value: number;
 6    onChange: (val: number) => void;
 7    disabled?: boolean;
 8  }
 9  
10  export const Slider: React.FC<SliderProps> = ({ label, value, onChange, disabled }) => {
11    return (
12      <div className={`flex flex-col gap-2 ${disabled ? 'opacity-50 pointer-events-none' : ''}`}>
13        <div className="flex justify-between text-xs font-medium uppercase tracking-wider text-slate-400">
14          <label>{label}</label>
15          <span className="text-cyan-400 font-mono">{value}%</span>
16        </div>
17        <input
18          type="range"
19          min="0"
20          max="100"
21          value={value}
22          disabled={disabled}
23          onChange={(e) => onChange(Number(e.target.value))}
24          className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-cyan-500 hover:accent-cyan-400 transition-all"
25        />
26      </div>
27    );
28  };