如何更新标签值与滑块更新值

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），它应该更新与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 { 
 
\t 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>