Increase jQuery slider handle clickable area

Question

I am looking to increase the clickable area on the jQuery slider handle. I don't, however, want to increase the visual size of the element. I don't want a giant handle. I just want to capture the click to the left and right of the handle, say by 10 pixels, to make it easier to "grab" the handle. Any ideas? Would I have to attach transparent divs there?

Answer 1

I had some success by using CSS ::after to create a pseudo-element.
But I cannot claim that this is the most effective solution.

In the example below I created a pseudo-element that extends 2em past the handle on the left and right, increasing its "hit area".

I don't like its oddly-shaped "active state" border.

$("#slider").slider({
  orientation: "vertical"
});

div#slider {
  margin: 3em;
}
span.ui-slider-handle::after {
  content: "";
  display: block;
  position: absolute;
  width: 1.2em;
  height: 1.2em;
  padding: 0 2em;
  left: -2em;
  cursor: pointer;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet" />

<div id="slider"></div>