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):

1
2
3
4
5

$(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:

1
2
3
4
5
6

.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.