Question

我希望增加jQuery滑块手柄上的可点击区域。但是，我不希望增加元素的视觉大小。我不想要一个巨大的手柄。我只想捕捉手柄左右两侧的咔嗒声，比如10像素，以便更容易抓住＆＃34;手柄。有任何想法吗？我必须在那里附上透明的div吗？

Answer 1

通过使用CSS ::after创建pseudo-element，我取得了一些成功但我不能说这是最有效的解决方案。

在下面的例子中，我创建了一个伪元素，它在左右两侧的句柄上延伸2em，增加了它的“命中区域”。

我不喜欢它形状奇特的“活跃状态”边界。

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

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

1 个答案: