1

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

Закрыто

3
  • Вы не можете знать почему метод не работает пока вы не покажете исходный код.
    – Roman C
    31 мар 2018 в 20:42
  • @RomanC так в том то и дело, что я скопировал код из своего проекта... Единственное отличие - это то, что в проекте я вызываю функцию setPrice() в компоненте, который отрисовывает блок с этим инпутом. В componentDidMount() 31 мар 2018 в 20:46
  • Понимаю, что нужно смотреть сам проект, но какие-то странные вещи.. 31 мар 2018 в 20:47

1 ответ 1

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>

3
  • После того как я получаю данные товаров по API мне нужно в форме указать минимальную и максимальную цену. Также чтобы в input range value было равно максимальной цене. Все это должно произойти сразу после того как форма отрисовалась на странице, а не по изменению инпута 1 апр 2018 в 0:20
  • Ты дважды запускаешь одну и туже функцию... Я с трудом понимаю, что ты хотел изобразить... А случайный выбор диапазона цен тут к чему?
    – Air
    1 апр 2018 в 6:01
  • Я же написал, что я хотел изобразить. Случайный диапазон цен здесь для примера, в проекте на месте этих двух функций стоит функция нахождения максимальной и минимальной цены. 1 апр 2018 в 13:22

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.