src/components/slider/index.tsx

import cn from "classnames";
import style from "./style.module.scss";

export function Slider(props: {
    value: number,
    onChange: (value: number) => void,
    name: string,
    min: number,
    max: number,
    step: number,
    className?: string,
    disabled?: boolean,
}) {
    return (
        <div
            className={cn(style.slider, props.className)}
            style={{
                "--value": props.value,
                "--min": props.min,
                "--max": props.max,
                "--step": props.step,
            }}
        >
            <input
                type="range"
                className={style.input}
                name={props.name}
                min={props.min}
                max={props.max}
                step={props.step}
                value={props.value}
                onInput={(e) => props.onChange(Number((e.target as HTMLInputElement).value))}
            />
            <div className={style.progress}></div>
            <div className={style.outputContainer}>
                <output className={style.output}>{props.value}</output>
            </div>
        </div>
    )
}