Как получить доступ к ползунку текущего диапазона? - PullRequest
Новая
       53

Как получить доступ к ползунку текущего диапазона?

0 голосов
/ 26 апреля 2020

У меня есть 2 входа диапазона (скажем, 100), и я хочу прикрепить значения каждого из них к массиву, например: 

   <input id="range1" type="range" max="2">
   <input id="range2" type="range" max="2">

    <script>
    var items=new Array();

    items[1]=new Array("dog","horse","cat");
    items[2]=new Array("x","y","z");

    for (x=1;x<3;x++){
        $('#range'+x).rangeslider({
            polyfill : false,
            onSlideEnd: function(position, value) {
                console.log(items[x][value]);       
            }
        });
    }
    </script>

Текущий лог c всегда печатает значение items[2][blah], потому что на конец l oop the x = 2 . Как я могу получить доступ к текущему вводу внутри ползунка диапазонов (так что извлеките его идентификатор) (или, возможно, создайте локальную переменную вместо x внутри этого l oop для каждого ползунка, чтобы избавиться от глобальной переменной X)?

1 Ответ

0 голосов
/ 27 апреля 2020

Вы можете получить элемент и текущее значение в событии onSlideEnd следующим образом 

$(document).ready(function() {
  // you can also use $('*[id^="range-"]').rangeslider({
  $('.range-slider').rangeslider({
    polyfill: false,
    onSlideEnd: function(position, value) {
      // access to the range-input: this.$element
      // the example shows the id of the range element
      console.log(this.$element.attr('id'));
      
      // access to the current value
      console.log(value);
    }
  });
});
.rangeslider { margin-bottom: 35px; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.js"></script>

<input id="range-1" class="range-slider" type="range" max="2" />
<input id="range-2" class="range-slider" type="range" max="2" />
<input id="range-3" class="range-slider" type="range" max="2" />
...