nouisliderのピップ/スケールの強調表示

Question

nouisliderライブラリを使用して6つのスライダを作成しています。

スライダーにピップを追加しました。私は該当するスライダーのピップの値を強調表示し、スライダーの動きに応じて更新したいと思います。

私は現在行っていることのjsFiddleを作成しました。

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 
     } 
    }); 
} 

これを成し遂げる方法については任意のヘルプ。

Answer 1

私はnoUiSliderに詳しくはありませんが、ここでは更新イベントのdocumentationにまとめました。あなたは変更を使うことができますが、私は最初の強調表示が好きです。このメソッドは、値が要素の表示されたインデックスと等しいためにのみ機能します。 1またはその他の値で開始した場合は、.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>