Здравствуйте, у меня есть input type='range'
.
С помощью js я задаю ему значения max
, min
, value
. Так вот, хочу чтобы значение по умолчанию стало максимальным, но даже при value=(максимальное значение) инпут находится на минимальном значении.
Не могу понять почему.
Вот код, который у меня в проекте.
const randomValue = (min, max) => {
let rand = min - 0.5 + Math.random() * (max - min + 1)
rand = Math.round(rand);
return rand;
};
const setPrice = () => {
let slider = document.getElementById('price');
let minPriceField = document.getElementById('price-range-min-field');
let maxPriceField = document.getElementById('price-range-max-field');
let minPriceValue = randomValue(5000, 15000);
let maxPriceValue = randomValue(25000, 50000);
minPriceField.textContent = minPriceValue;
maxPriceField.textContent = maxPriceValue;
slider.setAttribute('min', minPriceValue);
slider.setAttribute('max', maxPriceValue);
slider.setAttribute('value', maxPriceValue);
}
setPrice();
<fieldset className='products-filter-group'>
<label htmlFor='price-range'>Максимальная цена</label><br/>
<span className='price-range-min' id='price-range-min-field'>1000</span>
<input type='range' id='price' name='price-range' />
<span className='price-range-max' id='price-range-max-field'>5000</span>
</fieldset>
В демке все работает как надо, инпут принимает максимальное значение после того как setAttribute
срабатывает.
Но у меня в react
проекте, почему-то на установку атрибута value
вообще нет реакции slider.setAttribute('value', maxPriceValue)
.
Есть у кого-нибудь идеи по поводу этого? Может я допускаю где-то ошибку?
UPD
Только до меня дошло, что можно поменять значение через slider.value = value
, но почему через аттрибут value
не хочет меняться, объясните пожалуйста?) Хотя опять же в демке меняется... не понятно
setPrice()
в компоненте, который отрисовывает блок с этим инпутом. ВcomponentDidMount()