javascript - 如何使用 slider 更新值更新标签值

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 个 slider 的方式:

$("#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 或 4)，它应该更新与该 basic_slider_# 相关的 slider-step-value 的值。

我该如何解决这个问题？

Answer 1

<强> Working fiddle 。

我认为您正在寻找:

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]);
  });
}

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

<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>