CODEWITHSUNDEEP
jqueryjquery-ui
vtj205
vtj205

Reputation: 285

Jquery UI - Range Slider - only move slider when clicking on slider handle

I'm using Jquery UI to create a slider. Here the link: http://jqueryui.com/slider/#range. I need the slider to only move when clicking on the slider handle (the grey squares). Right now it moves if you click on or outside or those grey squares. Thanks!

Upvotes: 1

Views: 1120

Answers (1)

vtj205
vtj205

Reputation: 285

I actually just fixed this using CSS. If anyone else has this issue, my solution was basically to remove the pointer event from the outside div id and keep it only on the ui-slider-handle. Hope this helps someone else :)

#slider-range { pointer-events: none; }
#slider-range .ui-slider-handle { pointer-events: auto; }

If you want to change this for all sliders you can use this Global CSS:

.ui-slider { pointer-events: none; }
.ui-slider .ui-slider-handle { pointer-events: auto; }

Upvotes: 3

Related Questions