Wie aktualisiert Tag-Wert mit dem Schieberegler aktualisiert Wert

Question

Grundsätzlich versuche ich implement this.

Das ist mein 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> 

Dies ist, wie ich 4 Schieberegler auf meiner Seite initialisiert:

$("#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 
    } 
    }); 

Also, was ich passieren soll, ist, da der Wert erzeugt durch basic_slider_# (wo # kann 1, 2, 3 or 4 sein), sollte es den Wert der slider-step-value aktualisieren, die zu dieser basic_slider_# verwandt ist.

Wie gehe ich das an?

Answer 1

Working fiddle.

Ich denke, dass das, was Sie suchen:

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>