49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
|
|
interface SliderProps {
|
|
value: number;
|
|
onChange: (value: number) => void;
|
|
min?: number;
|
|
max?: number;
|
|
step?: number;
|
|
label?: string;
|
|
showValue?: boolean;
|
|
}
|
|
|
|
const Slider: React.FC<SliderProps> = ({
|
|
value,
|
|
onChange,
|
|
min = 0,
|
|
max = 100,
|
|
step = 1,
|
|
label,
|
|
showValue = false,
|
|
}) => {
|
|
return (
|
|
<div className="flex flex-col gap-2 w-full">
|
|
{label && (
|
|
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
{label}
|
|
</label>
|
|
)}
|
|
<div className="flex items-center gap-4">
|
|
<input
|
|
type="range"
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
value={value}
|
|
onChange={(e) => onChange(Number(e.target.value))}
|
|
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-500 dark:bg-gray-700"
|
|
/>
|
|
{showValue && (
|
|
<span className="min-w-[3rem] text-right text-sm font-mono text-gray-600 dark:text-gray-400">
|
|
{value}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Slider; |