How to make the scale area clickable in noUiSlider to move the handle?

Question

When we add a scale/pips to the slider, this new area is not clickable to change the position of the handle. As I'd like to use a thin track style, this can be a problem for the UX.

I tried to follow the idea of this issue which is about the handler, but this modified all the consistency of all elements in that case.

How to make this new area clickable to move the handle?

You can find the example on JSFiddle.

The scale area has been added with:

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

Answer 1

To get your desired result, you can alter the height of the element matching .noUi-base as well as .noUi-connect. In this updated fiddle, I added this 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;
}

As a recommendation, you might want to make a different class for "clickablePips" which you would target by .clickablePips .noUi-base { /*CSS rules...*/ } etc. This way, the developer is declaring what the intention of this style is, instead of having the style rule affect all items matching the #slider.

Answer 2

To make the area clickable you can set the style of the pip to pointer and listen to the click event, like so:

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'); - Selects all pip values inside the slider.
2. for (let val of values) - Loop over each pip
3. val.style.cursor = 'pointer'; - Set each pip cursor to pointer
4. val.pip = val.innerHTML; - Save the value of the pip (0, 10,20...) in the HTML element itself
5. val.onclick = (e) => { slider.noUiSlider.set(val.pip); } - On click set the value of the slider to the clicked value.

Working JSFiddle