Как обновить значение тега с обновленным значением ползунка

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