Search code examples
jquery-uislidernouislider

noUiSlider or jQuery Slider - Force user to slide the handle only

I have not found a configuration option in the docs for either widget, but is there a way to implement the noUiSlider or jQuery UI Slider to provide this functionality in a localized way (localized = allow default functionality where needed in other sections of the DOM):

  • User must click and drag the handle to set a value
  • User cannot click on the bar to set the value -> value not set to where user clicked

This is for a business requirement, and while I don't mind learning how to re-write a slider from scratch in vanilla JS, it is quite nice to use well-supported widgets. Thanks in advance.

Solution

  • You can do this in noUiSlider by setting behaviour: 'none'. See the documentation for more info.