Здравствуйте помогите пожалуйста input type range

197
21 апреля 2018, 18:48

Есть два input type range/ При передвигание одного ползунка, срабатывает второй тоесть повторяет такие же движение. К примеру первый ползунок идет в слева на право, второй делает то же самое. Спасибо заранее

Answer 1

Событие input в помощь

var range1 = document.getElementById('range1'); 
var range2 = document.getElementById('range2'); 
 
range1.addEventListener('input', function (e) { 
  range2.value = e.target.value; 
}); 
range2.addEventListener('input', function (e) { 
  range1.value = e.target.value; 
});
<input type="range" id="range1"> 
<input type="range" id="range2">

Answer 2

Можно использовать jQuery

<input type="range" id="range-1">
<input type="range" id="range-2">
<script>
  // Подписываемся на событие изменения первого инпута
  $('#range-1').change(function() {
    // При срабатывании, записываем значение первого во второй
    $('#range-2').val($(this).val());
  })
</script>

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

READ ALSO
Fake input в react autocomplete

Fake input в react autocomplete

Делаю свой кастомный autocomplete на React, он получает входные данные типа:

192
Добавить виджет weibo на страницу

Добавить виджет weibo на страницу

Может кто сталкивался с такимКак вывести виджет weibo на страницу? У них изменился порядок подключения виджета в 2017 году

177
Подставить id в url

Подставить id в url

Пишу скрипт в Tampermonkey

157
Ошибка hide()&hellip;fadeIn() is not a function

Ошибка hide()…fadeIn() is not a function

Это старый код, но почему именно такая ошибка мне не понятноМожет кто то сталкивался с таким?

181