Изменить значения input range js

208

01 апреля 2018, 21:55

Здравствуйте, у меня есть 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 не хочет меняться, объясните пожалуйста?) Хотя опять же в демке меняется... не понятно

Закрыто

Answer 1

document.querySelector('#price').addEventListener('input', setPrice)

Запускать надо так, но если честно, не могу даже вообразить, что ты пытался реализовать

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); 
} 
 
document.querySelector('#price').addEventListener('input', 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>