Question

I have some jquery ui sliders you can see here

When you click the slider bar, the tic jumps to that part of the bar. This is great however the bar is very thin and easy to miss when you try to click it. I don’t want to change the appearance but I am wondering if there is a way to make the click radius a little padded so if you click a few pixels above or below the bar it still counts as clicking the bar.

Answer 1

It’s a pretty hackish solution, but I believe this will work. What you need to do is to inject an additional transparent element into each slider that has a height larger than it’s parent’s. The code looks something like this:

$('<div></div>').appendTo('.ui-slider').css({
    'height': '20px',
    'position': 'absolute',
    'top': '-8px',
    'width': '100%'
});

Of course it would be better if you give them a class and apply the CSS in the stylesheet instead. In addition to that, I would suggest adding in cursor: pointer to make it clear which areas are clickable.