Limit slider handle *edges* to the ends of the track?

[adlaws]

Hi!

This is such a great and easy-to-use toolkit - really appreciate your efforts on this!

This is a bit of a picky thing, and if it's not possible, well... it's not possible, but...

I was wondering if there was a way to style the slider, or use the existing options, such that the handle positions on the track are limited by their outer edge?

I suspect the above explanation might not be clear, so hopefully using one of the customized style examples on https://refreshless.com/nouislider/examples/ will make it a bit clearer.

The square slider is probably the best example - you can see when the slider handle is dragged to the extreme left or right ends, the handle sort of "breaks out" of the end of the track. The middle of the handle is the constraining point.

This makes total sense, but if you compare it to the behaviour of the native <input type="range"> slider (as shown here, for example https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) it doesn't match up.

Indeed, this is actually the source of my query, as I am mixing native sliders with noUiSliders and so the visual mismatch is a bit more apparent:

If CSS overrides or options cannot achieve this then ideally, in "I want a pony!" land, there would be an option like trackMargin: 8 (or something) that could be specified on creation.

This would just "adjust everything" so that the center of the handle would stop once it reached within 8 pixels of either end of the track. The 8 value is in pixels, and would be half the width of the handle to make the edges of it "hit" the ends. The default would be 0 (i.e., no margin, so the handle center "hits" the end, as is the current behaviour).

I can imagine that styling in this way would also have flow on effects for evaluating what value the handle position equates to, not to mention positioning of pips/ticks etc, so I appreciate that this may not be a simple ask. 😅

...and I could, of course, just use the noUiSlider everywhere, and then there would be no visual disparity. 😄

Anyway, thanks again for your work and for providing this framework!

[leongersen]

Thanks for your feedback, I'm glad you find noUiSlider useful! 😊

There's an example in the documentation of how to add padding to the slider base here. It is definitely kinda hidden over there, and it should be moved to the (recently added) styling example in the examples category.

Long story short, you can do something like the following:

.noUi-target {
    padding: 0 17px;
}
.noUi-connects {
    margin: 0 -17px;
    width: calc(100% + 34px);
}

[adlaws]

Howdy @leongersen!

Thanks for the quick response!

This has exactly addressed the styling of the slider, though I only needed the .noUi-target CSS style rule.

The one for the .noUi-connects shifted the "connector" off to one side in a weird way - when I removed it everything looked exactly right.

Thanks for your help!

[leongersen]

Thanks for your feedback! The styling in the documentation was outdated and I had forgotten to update it. I've done that now, and I've added an easier to discover example in the documentation.

[adlaws]

Nice! That example is really clear 👍 Cheers for all your help!

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.