Surlignage pips/scale sur nouislider

Question

Je construis six curseurs en utilisant la librairie nouislider.

J'ai ajouté des pips aux curseurs. Je voudrais mettre en évidence la valeur du pip pour le curseur pertinent est sur et mettre à jour en conséquence sur le déplacement du curseur. J'ai créé un jsFiddle de ce que j'ai fait actuellement.

HTML:

<div class="sliders" id="slider1"></div> 
<br/> 
<div class="sliders" id="slider2"></div> 
<br/> 
<div class="sliders" id="slider3"></div> 
<br/> 
<div class="sliders" id="slider4"></div> 
<br/> 
<div class="sliders" id="slider5"></div> 
<br/> 
<div class="sliders" id="slider6"></div> 

JS:

var sliders = document.getElementsByClassName('sliders'); 

for (var i = 0; i < sliders.length; i++) { 

    noUiSlider.create(sliders[i], { 
     start: 0, 
     step: 1, 
     connect: "lower", 
     orientation: "horizontal", 
     range: { 
      'min': 0, 
      'max': 5 
     }, 
     pips: { 
      mode: 'values', 
      values: [0, 1, 2, 3, 4, 5], 
      density: 100 
     } 
    }); 
} 

Toute aide sur la façon d'y parvenir.

Answer 1

Je ne suis pas très familier avec noUiSlider, mais voici quelque chose que j'ai mis ensemble à partir de leur événement de mise à jour dans le documentation. Vous pouvez utiliser le changement, mais j'aime la mise en évidence initiale. Gardez à l'esprit que cette méthode fonctionne uniquement parce que vos valeurs sont équivalentes aux index affichés des éléments. Si vous aviez commencé avec 1 ou toute autre valeur, vous auriez besoin de trouver une méthode différente pour cibler le .noUi-value.

/* Loop Through Sliders */ 
 
$('.sliders').each(function() { 
 
    /* Variable Defaults */ 
 
    var slider = this; 
 
    
 
    /* Init noUiSlider */ 
 
    noUiSlider.create(slider, { 
 
     start: 0, 
 
     step: 1, 
 
     connect: "lower", 
 
     orientation: "horizontal", 
 
     range: { 
 
      'min': 0, 
 
      'max': 5 
 
     }, 
 
     pips: { 
 
      mode: 'values', 
 
      values: [0, 1, 2, 3, 4, 5], 
 
      density: 100 
 
     } 
 
    }); 
 

 
    /* Bind Update Event to noUiSlider */ 
 
    slider.noUiSlider.on('update', function(values) { 
 
     /* Set Maximum Position */ 
 
     var maxPos = Math.max(values); 
 
     
 
     /* Add Highlight Class to Pip */ 
 
     $(slider).find('.noUi-value:visible').removeClass('highlight').eq(maxPos).addClass('highlight'); 
 
    }); 
 
});

.sliders { 
 
\t margin-top: 40px; 
 
} 
 

 
.noUi-pips-horizontal:last-child .noUi-marker-large, .noUi-marker-sub { 
 
\t display: none; 
 
} 
 

 
.noUi-pips-horizontal { 
 
\t top: -55px !important; 
 
} 
 

 
/* Highlight CSS */ 
 
.noUi-value.highlight { 
 
\t color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.css" rel="stylesheet"/> 
 
<div class="sliders" id="slider1"></div> 
 
<br> 
 
<div class="sliders" id="slider2"></div> 
 
<br> 
 
<div class="sliders" id="slider3"></div> 
 
<br> 
 
<div class="sliders" id="slider4"></div> 
 
<br> 
 
<div class="sliders" id="slider5"></div> 
 
<br> 
 
<div class="sliders" id="slider6"></div>