0

Есть input с типом range, по умолчанию он имеет один бегунок, как методами jQuery сделать два бегунка? Что бы было так Не предлагайте плагины, нужно именно в ручную сделать.

1
  • 4
    Не предлагайте плагины... - jquery - это, конечно, руками :)
    – splash58
    17 сен 2019 в 14:21

2 ответа 2

2

Зачем что то делать свое если jquery уже за вас позаботился:

  $( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  } );
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

<div id="slider-range"></div>

jQuery Slider

4
  • так это плагин jQueryUI =) а человек хотел ручками все сделать 17 сен 2019 в 15:00
  • 1
    С помощью jQueryUI знаю что можно, но нужно самому сделать
    – Viktor
    17 сен 2019 в 15:04
  • Так зачем тогда jQuery? тогда лучше хардкор нативный JS, вы потратите время на лишнюю работу. 17 сен 2019 в 16:17
  • @RuslanSemenov если так судить, весь сайт на плагинах делать тогда уж, время экономить.
    – user298256
    17 сен 2019 в 17:27
1

как вариант что-то типа такого, наложить 2 слайдера один на один и при драге одного сравнивать значение со вторым и перемещать второй, чтобы не давать им "залезать" друг за друга

const sliders = document.querySelectorAll('input[type="range"]');

sliders[0].addEventListener('input', (e) => {
 if(+sliders[0].value > +sliders[1].value){
    sliders[1].value = +sliders[0].value;
  }
});

sliders[1].addEventListener('input', (e) => {
 if(+sliders[1].value < +sliders[0].value){
    sliders[0].value = +sliders[1].value;
  }
});

sliders.forEach((slider) => {
  slider.addEventListener('change', () => {
    console.log(`from ${sliders[0].value} to ${sliders[1].value}`);
  })
});
.container{
  position: relative;
  pointer-events: none;
}

.container input[type="range"]{
  height: 2em;
  display: block;
  margin: 0;
}

.container input[type="range"]:last-child{
  margin-top: -2em;
}

input[type="range"]::-webkit-slider-thumb {
  pointer-events: all;
}
input[type="range"]::-moz-range-thumb {
  pointer-events: all;
}
input[type="range"]::-ms-thumb {
  pointer-events: all;
}
<div class="container">
  <input type="range" min="0" step="1" max="10" value="3">
  <input type="range" min="0" step="1" max="10" value="7">
</div>

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