Question

我想让jQuery UI 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来使其看起来像您希望的那样。

增加触摸目标大小jQuery ui slider

1 个答案: