Tech Blog‎ > ‎

Extend Clickable Area For jQueryUI Slider

posted Feb 15, 2017, 11:53 AM by Victor Zakharov   [ updated Feb 15, 2017, 11:59 AM ]
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 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):

$(document).ready(function() {
    var clickArea = $(document.createElement('div'));
    clickArea.addClass('click-area');
    clickArea.appendTo(sliderControl);
});

Then your .click-area class would be defined similar to the following:

.click-area {
    top: -15px;
    width: 100%;
    height: 29px;
    position: absolute;
}

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:
- http://mkrtchyan.co.uk/extending-the-clickable-area-for-jquery-ui-slider/