-
Notifications
You must be signed in to change notification settings - Fork 1
/
SliderComponent.jsx
44 lines (37 loc) · 1.1 KB
/
SliderComponent.jsx
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
import "./SliderComponent.css";
import { useState } from "react";
function SliderComponent(props) {
const { className, value, min, max, step, onChange } = props;
const handleChange = (e) => {
const newValue = parseFloat(e.target.value, 10);
if (onChange) {
onChange(newValue);
}
};
const [hover, setHover] = useState(false);
const onTouchStart = () => {
setHover(true);
};
const onTouchEnd = () => {
setHover(false);
};
const progress = ((value - min) / (max - min)) * 100;
return (
<input
className={`range-input ${className} ${hover ? "active" : ""}`}
style={{ "--progress": `${progress}%` }}
type="range"
min={min}
max={max}
step={step}
value={value}
onChange={handleChange}
onTouchStart={onTouchStart}
onTouchEnd={onTouchEnd}
onTouchCancel={onTouchEnd}
onMouseEnter={onTouchStart}
onMouseLeave={onTouchEnd}
/>
);
}
export default SliderComponent;