Update input components

lib/component/input/number/NumberSlider.tsx

@@ -9,28 +9,31 @@ export default function NumberSlider({
 	min,
 	max,
 	step,
-	defaultValue,
 	value,
 	onChange,
-	disabled
-}: NumberSliderProps){
+	disabled,
+	ariaLabel
+}: Readonly<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",
+				"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}
-			defaultValue={defaultValue}
 			value={value}
-			onChange={(e) => onChange?.(e.target.valueAsNumber)}
+			onChange={(e) => onChange(e.target.valueAsNumber || 0)}
 			disabled={disabled}
+			aria-label={ariaLabel}
+			aria-valuemin={min}
+			aria-valuemax={max}
+			aria-valuenow={value}
 		/>
 	);
 }