src/components/slider/index.tsx

// import * as RadixSlider from "@radix-ui/react-slider";
// import style from "./style.module.scss";
// import {useState} from "preact/hooks";
//
// export function Slider(props: {
//     value: number,
//     min: number,
//     max: number,
//     step: number,
//     onChange: (value: number) => void,
//     className?: string,
//     disabled?: boolean,
// }) {
//     const [value, setValue] = useState(1)
//
//     return (
//         <div className={style.rangeSlider} style={`--min:0; --max:5; --step:0.5; --value:${value}; --text-value:"${value}"`}>
//             <input
//                 type="range"
//                 min="0"
//                 max="5"
//                 step="0.1"
//                 value={value}
//                 onInput={(e) => setValue(Number((e.target as HTMLInputElement).value))}
//                 // onInput="this.parentNode.style.setProperty('--value',this.value); this.parentNode.style.setProperty('--text-value', JSON.stringify(this.value))"
//             />
//             <output></output>
//             <div className={style.progress}></div>
//         </div>
//     )
// }

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

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