2
votes

Dans noUiSlider: Déplacer le curseur en cliquant sur les pips fonctionne maintenant

J'essaye de déplacer le curseur en cliquant sur les pips. Cependant, en cliquant sur un pip, le curseur se déplace vers la position de départ, alors qu'il devrait plutôt se déplacer vers la position où le pip a été cliqué. Quelqu'un peut-il aider?

var pipsSlider = document.getElementById('slider-pips');
noUiSlider.create(pipsSlider, {
  range: {
    min: 0,
    max: 100
  },
  start: [50],
  pips: {
    mode: 'count',
    values: 5
  }
});

var pips = pipsSlider.querySelectorAll('.noUi-value');

function clickOnPip() {
  var value = Number(pipsSlider.getAttribute('data-value'));
  pipsSlider.noUiSlider.set(value);
}

for (var i = 0; i < pips.length; i++) {
  pips[i].style.cursor = 'pointer';
  pips[i].addEventListener('click', clickOnPip);
}

<div id="slider-pips" style="top: 0px; right: 1px; margin: 10px 25px;"></div>

La démo est ici: https://jsfiddle.net/xfrtho8m/1/

J'essaye de l'implémenter comme ceci: https://refreshless.com/nouislider/examples/#section-click-pips

javascript jquery nouislider

0 commentaires

3 Réponses :

3
votes

Le problème est que vous essayez de définir la valeur du curseur sur un attribut data qui n'existe pas.

À la place, il vous suffit de lire le texte du "pip" cliqué et de définir la valeur comme suit:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.js"></script>
<div id="slider-pips" style=""></div>

#slider-pips {
  top: 0;
  right: 1px;
  margin: 10px 25px;
}

.noUi-value {
  cursor: pointer;
}

var pipsSlider = document.getElementById('slider-pips');

noUiSlider.create(pipsSlider, {
  range: {
    min: 0,
    max: 100
  },
  start: [50],
  pips: {
    mode: 'count',
    values: 5
  }
});
var pips = pipsSlider.querySelectorAll('.noUi-value');

function clickOnPip() {
  var value = parseInt(this.innerText, 10);
  pipsSlider.noUiSlider.set(value);
}

for (var i = 0; i < pips.length; i++) {
  pips[i].addEventListener('click', clickOnPip);
}

function clickOnPip() {
  var value = parseInt(this.innerText, 10);
  pipsSlider.noUiSlider.set(value);
}

0 commentaires

0
votes

Alors que l'autre réponse résout le problème ici, la version noUiSlider utilisée dans la démo fournie est 8.5.1 . Les attributs data-value ont été ajoutés dans noUiSlider 11.0.0 (comme mentionné dans la documentation liée à la question). La mise à niveau de noUiSlider ferait fonctionner le code fourni à l'origine.

0 commentaires

0
votes

À partir de la version 11.0.0, comme mentionné, vous devez utiliser des attributs de données. Cela fonctionne:

var pips = pipsSlider.querySelectorAll('.noUi-value');

function clickOnPip() {
    var value = Number(this.dataset.value);
    pipsSlider.noUiSlider.set(value);
}
    
for (var i = 0; i < pips.length; i++) {
    pips[i].style.cursor = 'pointer';
    pips[i].addEventListener('click', clickOnPip);
}

0 commentaires