Extend Clickable Area For jQueryUI Slider

   · β˜• 1 min read
🏷️
  • #jquery
  • #jqueryui
  • 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:

    jquery extend clickable slider area

    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.


    Victor Zakharov
    WRITTEN BY
    Victor Zakharov
    Web Developer (Angular/.NET)