40 lines
696 B
TypeScript
40 lines
696 B
TypeScript
import type { NumberSliderProps } from "$/types/InputTypes";
|
|
import clsx from "clsx";
|
|
|
|
|
|
export default function NumberSlider({
|
|
id,
|
|
className,
|
|
name,
|
|
min,
|
|
max,
|
|
step,
|
|
value,
|
|
onChange,
|
|
disabled,
|
|
ariaLabel
|
|
}: Readonly<NumberSliderProps>){
|
|
return (
|
|
<input
|
|
type="range"
|
|
id={id}
|
|
className={clsx(
|
|
"appearance-none [-moz-range-thumb:background:#04AA6D]",
|
|
"h-5 px-0.5 rounded-full bg-primary",
|
|
className
|
|
)}
|
|
name={name}
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.valueAsNumber || 0)}
|
|
disabled={disabled}
|
|
aria-label={ariaLabel}
|
|
aria-valuemin={min}
|
|
aria-valuemax={max}
|
|
aria-valuenow={value}
|
|
/>
|
|
);
|
|
}
|