69 lines
1.6 KiB
JavaScript
69 lines
1.6 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import '../Components/RangeSlider.scss';
|
|
|
|
const RangeSlider = ({
|
|
min = 1,
|
|
max = 100,
|
|
step = 1,
|
|
onChange,
|
|
Defaultvalue,
|
|
}) => {
|
|
const [value, setValue] = useState(min);
|
|
const [displayValue, setDisplayValue] = useState(min);
|
|
|
|
const handleChange = (e) => {
|
|
const newValue = parseInt(e.target.value, 10);
|
|
setValue(newValue);
|
|
if (onChange) onChange(newValue);
|
|
};
|
|
useEffect(() => {
|
|
setValue(Defaultvalue);
|
|
}, [Defaultvalue]);
|
|
|
|
useEffect(() => {
|
|
let animationInterval;
|
|
|
|
if (displayValue !== value) {
|
|
const stepAmount = Math.abs(value - displayValue) / 3;
|
|
animationInterval = setInterval(() => {
|
|
setDisplayValue((prev) => {
|
|
if (Math.abs(prev - value) < 1) {
|
|
clearInterval(animationInterval);
|
|
return value;
|
|
}
|
|
return prev < value
|
|
? prev + Math.ceil(stepAmount)
|
|
: prev - Math.ceil(stepAmount);
|
|
});
|
|
}, 50);
|
|
}
|
|
|
|
return () => clearInterval(animationInterval);
|
|
}, [value, displayValue]);
|
|
|
|
const progress = ((value - min) / (max - min)) * 100;
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
fontFamily: 'Gilroy',
|
|
}}
|
|
>
|
|
<div className="range-slider">
|
|
<input
|
|
type="range"
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
value={value}
|
|
onChange={handleChange}
|
|
className="range-slider__input"
|
|
style={{ '--progress': `${progress}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RangeSlider;
|