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

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_#.

有关

我该如何处理？

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>

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

How to update tag value with the slider updated value

javascript

jquery

nouislider