File size: 2,070 Bytes
1982de5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
// 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>
)
} |