jquery - 增加触摸目标大小 jQuery ui slider

Question

我想让 jQuery UI Slider 在移动设备上更加用户友好。 这就是为什么我想增加触摸目标区域的大小来移动 slider 。我不想增加按钮的实际大小。我只是想增加按钮周围的框。因此，即使是笨手笨脚的用户或大拇指的用户也可以轻松控制 slider 。

Answer 1

您可以尝试使用 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;
}

请参阅下面的示例。

https://jsfiddle.net/Ohsik/k57o3em4/2/

您可能需要尝试使用 CSS 才能使其看起来像您想要的那样。