自定义 Jquery UI 滑块样式

Question

我对 jquery 没有那么丰富的经验，但我设法在我的 html 中放置了一个 jquery ui 价格滑块，特别是这个 - https://jqueryui.com/resources/demos/slider/range.html

现在我正在尝试自定义它。我想更改诸如悬停、拖动颜色之类的东西，使它们成为圆形滑块，以及一个细的而不是粗的，但我在网上找不到任何有关如何操作的文档。

我尝试检查元素并从那里获取仅用于禁用滑块轮廓的类。

.ui-slider-handle {
  outline: 0;
  background: purple;
  border-radius: 50%;
}

所以我知道这以滑块为目标，但更改颜色或边框半径没有任何作用。我的 css 是在 jquery ui css 之后声明的，所以我的 css 肯定应该覆盖它。

Answer 1

您可以使用比 jQuery 更高的specificity 来自定义滑块的样式。这样您就不必费心，首先包含哪些 CSS 声明，具有更高特异性的规则将适用。

这是一个工作示例。除了不同元素的类选择器之外，我还使用父选择器#slider 增加了特异性：

$(function() {
  $("#slider").slider();
});

#slider .ui-slider-handle {
  outline: 0;
  background: purple;
  border-radius: 50%;
  top: -.6em;
}

#slider.ui-slider-horizontal {
  top: 1em;
  left: 5%;
  height: .1em;
  width: 90%;
  border: none;
  background: #ccc;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="slider"></div>