Не двигается ползунок у input range
Всем привет!
Не работает ползунок у input range хотя его value меняется.
У меня два input в один вводится число и input range подстраивается под него. Либо когда меняем значение input range оно же и меняется в обычном input.
Все хорошо работает только если менять input range , а если поменять значение обычного input то ползунок стоит на том же месте.
const [value, setValue] = useState(20);
const [range, setRange] = useState((20 / 500) * 100);
const handleChange = (valueInp) => {
const value = (valueInp / 500) * 100;
setRange(value);
};
useEffect(() => {
handleChange(value)
}, [value]);
return (
<div className={mainContainer}>
<p className={mainTitle}>
Сколько квадратных метров помещение, которое нуждается в уборке?
</p>
<input
className={outputInput}
value={value}
type="text"
onChange={(e) => {
setValue(+e.target.value);
}}
/>
<div className={middle}>
<div className={sliderContainer}>
<span className={bar}>
<span style={{ width: `${range}%` }} className={fill}></span>
</span>
<input
className={slider}
onChange={(e) => {
setValue(e.target.value);
handleChange(e.target.value);
}}
type="range"
min="0"
max="500"
defaultValue={value}
/>
</div>
</div>
</div>Стили :
.outputInput {
padding: 20px;
border: 1px solid #94efff;
margin-top: 30px;
}
.sliderContainer {
position: relative;
top: 50px;
}
.sliderContainer .bar {
position: absolute;
z-index: 1;
left: 2px;
top: 7px;
width: 100%;
height: 10px;
border-radius: 5px;
background-color: #c7f7ff;
overflow: hidden;
}
.sliderContainer .bar .fill {
display: block;
width: 0;
height: 100%;
background-color: #0ac2b7;
}
.sliderContainer .slider {
position: relative;
z-index: 2;
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
outline: none;
background-color: transparent;
}
.sliderContainer .slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 25px;
height: 25px;
background-color: #0ac2b7;
border-radius: 50%;
cursor: pointer;
outline: none;
margin-top: 0.6rem;
box-shadow: 0 0 0 0 rgba(98, 0, 238, 0.1);
transition: 0.3s ease-in-out;
}
.sliderContainer .slider::-webkit-slider-thumb:hover {
box-shadow: 0 0 0 20px rgba(235, 231, 240, 0.1);
}
.sliderContainer .slider:active::-webkit-slider-thumb {
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.062);
}Источник: Stack Overflow на русском