Spaces:
Build error
Build error
File size: 1,349 Bytes
0bfe2e3 |
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 |
import React, { useEffect } from 'react';
import styles from './Slider.module.css';
interface SliderProps {
maxValue: number;
value: number;
setValue: (value: number | null) => void;
defaultValue: 'min' | 'max';
id: string;
}
const Slider: React.FC<SliderProps> = ({
maxValue,
value,
setValue,
defaultValue,
id,
}) => {
useEffect(() => {
const slider = document.getElementById(id) as HTMLElement;
const sliderValue =
defaultValue === 'min'
? ((value || 0) / maxValue) * 100
: ((value === null ? maxValue : value) / maxValue) * 100;
if (slider) {
slider.style.setProperty(`--${id}Value`, `${sliderValue}%`);
}
}, [value, maxValue, defaultValue, id]);
return (
<input
type="range"
id={id}
min="0"
max={maxValue}
step={maxValue / 10240}
value={value || 0}
onChange={(e) => {
setValue(
defaultValue === 'min'
? e.target.value === '0'
? null
: parseInt(e.target.value)
: e.target.value === maxValue.toString()
? null
: parseInt(e.target.value)
);
}}
className={styles.slider}
style={
{ '--currentSliderValue': `var(--${id}Value)` } as React.CSSProperties
}
/>
);
};
export default Slider;
|