增加触摸目标大小jQuery ui滑块

我想让jQueryUI滑块在移动设备上更加用户友好。

---

这就是为什么我想增加触摸目标区域的大小来移动滑块。我不想增加按钮的实际大小。我只想增加按钮周围的方框。因此，即使是笨拙的用户或大拇指用户也可以轻松控制滑块。

您可以使用CSS来增加按钮周围的填充

.ui-slider-handle{
  padding: 10px;
}

但是，在不增大按钮大小的情况下增加按钮周围的填充将有点棘手

.ui-slider-handle{
  padding: 10px;
  margin-top: -11px;
  border: none !importnat;
  background: 0 !important;
}
.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default,
.ui-slider-handle:hover{
  border: none !important;
}
.ui-slider-handle:after{
  content: "";
  width: 24px;
  height: 24px;
  background: #ccc;
  display: inline-block;
  border: 1px solid #666;
  border-radius: 4px;
  -moz-border-radius: 4px;
}

请参见下面的示例

您可能需要使用CSS来使它看起来像您希望的那样