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/ |
Tech Blog >