Comment rendre la zone d'échelle cliquable dans noUiSlider pour déplacer la poignée?

Question

Lorsque nous add a scale/pips to the slider, cette nouvelle zone n'est pas cliquable pour modifier la position de la poignée. Comme je voudrais utiliser un style de piste mince, cela peut être un problème pour l'UX.

J'ai essayé de suivre l'idée de ce issue qui concerne le gestionnaire, mais cela a modifié toute la cohérence de tous les éléments dans ce cas. Comment rendre cette nouvelle zone cliquable pour déplacer la poignée?

Vous pouvez trouver le example on JSFiddle.

La zone d'échelle a été ajoutée avec:

pips: { 
    mode: 'steps', 
    density: 10 
} 

Answer 1

Pour obtenir le résultat souhaité, vous pouvez modifier la hauteur de l'élément correspondant .noUi-base ainsi que .noUi-connect. Dans ce updated fiddle, j'ai ajouté ce CSS:

#slider .noUi-base { 
    /* makes the clickable area larger for pips */ 
    height: 55px; 
} 

#slider .noUi-connect { 
    /* shrinks child of prev style to its original height */ 
    height: 18px; 
} 

En guise de recommandation, vous voudrez peut-être faire une autre classe pour « clickablePips » que vous ciblerait par .clickablePips .noUi-base { /*CSS rules...*/ } etc. De cette façon, le développeur déclare ce que l'intention de ce style est, au lieu d'avoir la règle de style affecter tous les éléments correspondant à #slider.

Answer 2

Pour rendre la zone cliquable, vous pouvez définir le style du picot à pointer et d'écouter l'événement click, comme ceci:

let values = testSlider.getElementsByClassName('noUi-value'); 
for(let val of values){ 
    val.pip = val.innerHTML; 
    val.style.cursor = 'pointer'; 
    val.onclick = (e) => { 
     testSlider.noUiSlider.set(val.pip); 
    } 
} 

1. let values = slider.getElementsByClassName('noUi-value'); - Sélectionne toutes les valeurs de pépin à l'intérieur du curseur.
2. for (let val of values) - Boucle sur chaque pépin
3. val.style.cursor = 'pointer'; - Réglez chaque curseur pip pour pointeur
4. val.pip = val.innerHTML; - Enregistrer la valeur du pip (0, 10,20 ...) dans l'élément HTML lui-même
5. val.onclick = (e) => { slider.noUiSlider.set(val.pip); } - Lors du clic, définissez la valeur du curseur sur la valeur cliquée.

Working JSFiddle