leongersen
commented
1 year ago Your solution is definitely more elegant than my previous pitch. The idea of using a hidden handle to position the center fixed point is solid. I'd be interested in having this as a core feature of noUiSlider. I'll integrate your solution in the documentation. (I'd be open to a contribution on that, as well!)
As part of a migration effort from AngularJS to Angular 14, we have begun using this project in place of rzSlider. rzSlider had a number of useful features such as automatic detection (and resolution) of tooltip/label collisions and highlighting between the slider handle and an arbitrary value.
371 discussed a solution for highlighting from the center of the slider, but my needs are more robust than that, as I need to highlight from potentially any arbitrary value to the current handle value. Specifically, this is being used in a "playback progress" indicator similar to the track bar in a media player that shows how far into the song you are. In my application, the user can loop from any start and stop position, and I'd like to highlight only from the user-selected start position to the handle showing the current position in the track.
I created a JSFiddle to show my workaround, which I think is slightly more elegant than the documented solution to #371: https://jsfiddle.net/iamtheddrman/f01tde47/7/
In short, I create a handle at the desired start position and one at the "current" position, then disable and hide the start position handle.
This achieves the desired effect for my read-only slider, but it is definitely not my favorite code nor robust enough for interactive sliders. If something like this could be integrated into the tool itself, that would be fantastic.