mirror of
https://bitbucket.org/Mattrixwv/mattrixwvreactcomponents.git
synced 2025-12-07 06:03:58 -05:00
37 lines
624 B
TypeScript
37 lines
624 B
TypeScript
import type { NumberSliderProps } from "$/types/InputTypes";
|
|
import clsx from "clsx";
|
|
|
|
|
|
export default function NumberSlider({
|
|
id,
|
|
className,
|
|
name,
|
|
min,
|
|
max,
|
|
step,
|
|
defaultValue,
|
|
value,
|
|
onChange,
|
|
disabled
|
|
}: NumberSliderProps){
|
|
return (
|
|
<input
|
|
type="range"
|
|
id={id}
|
|
className={clsx(
|
|
"w-full appearance-none [-moz-range-thumb:background:#04AA6D]",
|
|
"h-6 bg-blue-300 accent-blue-600",
|
|
className
|
|
)}
|
|
name={name}
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
defaultValue={defaultValue}
|
|
value={value}
|
|
onChange={(e) => onChange?.(e.target.valueAsNumber)}
|
|
disabled={disabled}
|
|
/>
|
|
);
|
|
}
|