Even using the default jQueryUI’s slider style, the handle is larger than its container. Now suppose your container is 3x smaller than the handle (specific design requirement). There is a problem - you have to hit the container precisely to be able to change the slider’s value. Otherwise nothing happens.
Here is what I mean:
It would be nice to extend the slider clickable area to pretend it’s actual height matches slider or its handle, if handle is taller. You can do this by appending a bigger element to the slider, and then adjusting its position within the element.
Here is the code (jQuery):
.click-area class would be defined similar to the following:
You’ll need to play with these values to fit your needs. Also for best relative positioning, don’t forget to add position: relative on the parent element. Note that createElement is faster than other available methods.
My solution is based on this one.