iter 2

src/shared/ui/Slider/Slider.tsx

@@ -0,0 +1,58 @@
+import type { ISliderProps } from "./Slider.d"
+import type { JSX } from "react"
+
+import cs from "classnames"
+import { FunctionComponent, useCallback, useMemo } from "react"
+
+import styles from "./Slider.module.scss"
+
+export const Slider: FunctionComponent<ISliderProps> = ({
+	value,
+	min,
+	max,
+	step = 1,
+	label,
+	unit,
+	helpText,
+	onChange,
+	className,
+}): JSX.Element => {
+	const handleChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>) => {
+			onChange(Number(e.target.value))
+		},
+		[onChange],
+	)
+
+	const fillPercent = useMemo(
+		() => ((value - min) / (max - min)) * 100,
+		[value, min, max],
+	)
+
+	return (
+		<div className={cs(styles.root, className)} data-testid="Slider">
+			<div className={styles.header}>
+				<span className={styles.label}>{label}</span>
+				<span className={styles.value}>
+					{value}
+					{unit ? ` ${unit}` : ""}
+				</span>
+			</div>
+			<input
+				type="range"
+				className={styles.input}
+				min={min}
+				max={max}
+				step={step}
+				value={value}
+				onChange={handleChange}
+				style={
+					{
+						"--fill-percent": `${fillPercent}%`,
+					} as React.CSSProperties
+				}
+			/>
+			{helpText && <span className={styles.helpText}>{helpText}</span>}
+		</div>
+	)
+}