增加jQuery滑块手柄的可点击区域

Question

我希望增加jQuery滑块手柄上的可点击区域。但是，我不想增加元素的视觉大小。我不想要一个大把手。我只是想捕捉手柄左右的点击，比如10个像素，以便更容易"抓取"手柄。什么好主意吗?我需要在那里附加透明的潜水器吗?

Answer 1

我使用CSS ::after创建了一个伪元素。
但我不能说这是最有效的解决办法。

在下面的例子中，我创建了一个伪元素，它在左右两边延伸了2em，增加了它的"hit area"

我不喜欢它奇怪的"活动状态"边框。

$("#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>