如何使用滑块更新值更新标记值

Question

基本上我正在尝试implement this。

这是我的HTML：

        <td>
            <p>
              <button type="button" class="btn btn-danger m-r-sm" id="slider-step-value">5</button>
              Speed
            </p>
            <div id="basic_slider_1"></div>
        </td>

这就是我在页面上初始化4个滑块的方法：

$("#basic_slider_1, #basic_slider_2, #basic_slider_3, #basic_slider_4").noUiSlider({
    start: 3,
    step: 1,
    behaviour: 'tap',
    connect: 'upper',
    range: {
        'min':  1,
        'max':  10
    },
    pips: {
      mode: 'steps',
      density: 1
    }
  });

所以我想要发生的是，basic_slider_#生成的值（其中#可以是1, 2, 3 or 4），它应该更新slider-step-value的值basic_slider_#与[ { "id": 5920, "title": "a title" }, { "id": 5926, "title": "another title", } ] 。

有关

我该如何处理？

Answer 1

<强> Working fiddle

我认为你在找什么：

＆＃13;

＆＃13;

var sliders = $('.slider');
var buttons = $('.slider-step-value');

for ( var i = 0; i < sliders.length; i++ ) {
  var button = $(sliders[i]).prev('p').find('button')[0];
  
  noUiSlider.create(sliders[i], {
    start: 3,
    step: 1,
    behaviour: 'tap',
    range: {
      'min':  1,
      'max':  10
    },
    pips: {
      mode: 'steps',
      density: 1
    }
  });
  
  attachEvent(sliders[i], button);
}

function attachEvent(slider,button){
  slider.noUiSlider.on('update', function( values, handle ) {
    button.innerText = parseInt(values[handle]);
  });
}

＆＃13;

.slider .noUi-origin {
	background: #c0392b;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.js"></script>

<p>
  <button type="button" class="btn btn-danger m-r-sm slider-step-value">5</button>
  Speed
</p>
<div class="slider"></div>
<br><br>
<p>
  <button type="button" class="btn btn-danger m-r-sm slider-step-value">6</button>
  Speed
</p>
<div class="slider"></div>

＆＃13;

＆＃13;

＆＃13;