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}
		/>
	);
}