使用圆形点自定义 jQuery ui 滑块

Question

我正在创建一个输入范围滑块，允许用户在 1992-2017 范围内选择一年。 我正在使用Best jQuery library。

这是我创建的：PLUNKER。

html：

<div id='slider2'>
    <div id="circles-slider"></div>
</div>

css：

body {
    font-size: 9pt;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

#slider2 {
    padding: 30px;
    width: 500px;
    background-color: lime;
}

#circles-slider.ui-slider {
    border-radius: 20px;
    background: #434d5a;
    border: none;
    height: 10px;
    margin: 1em 4em 4em; 
}

#circles-slider .ui-slider-handle {
    border-radius: 18px;
    height: 18px;
    width: 18px;
    top: -4px;
    margin-left: -9px;
    border: 1px solid white; 
}

#circles-slider .ui-slider-pip {
    top: 3px; 
}

#circles-slider .ui-slider-pip .ui-slider-line {
    width: 4px;
    height: 4px;
    border-radius: 4px;
    margin-left: -2px;
    background: white; 
}

#circles-slider .ui-slider-pip.ui-slider-pip-last,
#circles-slider .ui-slider-pip.ui-slider-pip-first {
    top: -7px; 
}

#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-line,
#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-line {
    display: none; 
}

#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label,
#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
    margin: 0; 
}

#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
    left: -2em;
    text-align: right; 
}

#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label {
    left: 2em;
    text-align: left; 
}

#circles-slider .ui-slider-pip.ui-slider-pip-selected-initial {
    font-weight: normal; 
}

#circles-slider .ui-slider-pip.ui-slider-pip-selected {
    font-weight: bold; 
}

#circles-slider .ui-slider-pip.ui-slider-pip-selected,
#circles-slider .ui-slider-pip.ui-slider-pip-selected-initial {
    color: #434d5a; 
}

.ui-slider-pips .ui-slider-label {
    color: black;
    top: 7px;
}

.ui-slider-label {
    margin-top: 6px;
}

js：

var labels = [];
labels[0] = "1992";
labels[5] = "1997";
labels[10] = "2002";
labels[15] = "2007";
labels[20] = "2012";
labels[25] = "2017";

$("#circles-slider")
.slider({
    min: 1992, 
    max: 2017, 
    value: 2016,
    step: 1
})
.slider("pips", {
    first: "label",
    last: "label",
    rest: "label",
    labels: labels,
    step: 1
})
.slider("float", {
    labels: labels
});

这是我想要的：

我快到了。但是我希望这样：

1. 所有标签都位于灰线下方（甚至是 1992 年开始和 2017 年结束的标签）
2. 标签上与年份相关的点的颜色与其他点不同（在本例中为橙色）
3. 所选年份位于滑块的右侧
4. 绿地太大，我受不了。它应该小得多（必须包含滑块和所选年份的标签）。

我需要帮助。

Answer 1

演示： https://plnkr.co/edit/fT0Kbgwl9oEKSpf8dmwI?p=preview

1. 您添加了一些额外的样式，您需要删除这些样式才能获得滑块下方的第一个和最后一个标签。

#circles-slider .ui-slider-pip.ui-slider-pip-last,
#circles-slider .ui-slider-pip.ui-slider-pip-first {
    top: -7px; 
}

#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-line,
#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-line {
    display: none; 
}

#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label,
#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
    margin: 0; 
}

#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
    left: -2em;
    text-align: right; 
}

#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label {
    left: 2em;
    text-align: left; 
}

1. 根据我的理解，您需要每隔 5 个点着色一次。你可以这样做：

#circles-slider .ui-slider-pip:nth-child(5n+2) .ui-slider-line{
   background-color: orange;
}

PS：5n 应该可以的。我需要再次检查。

1. 我通过在slider2 上使用flex 布局并将.ui-slider 的宽度设置为85% 来完成此操作。所以你的 HTML 应该是这样的：

<div id='slider2'>
  <div id="circles-slider">
  </div>
  <span id="selected-year-label"></span>
</div>

4. 您可以根据需要使用 #slider2 和 .ui-slider 的边距和内边距来做到这一点。

为了更新滑块上的当前值，我添加了 slidechange 事件侦听器。所以你的 JS 变成了：

const SLIDER_INITIAL_VAL = 2016;
var labels = [];
labels[0] = "1992";
labels[5] = "1997";
labels[10] = "2002";
labels[15] = "2007";
labels[20] = "2012";
labels[25] = "2017";

$("#circles-slider")
  .slider({
    min: 1992,
    max: 2017,
    value: SLIDER_INITIAL_VAL,
    step: 1
  })
  .slider("pips", {
    first: "label",
    last: "label",
    rest: "label",
    labels: labels,
    step: 1
  });

$("#selected-year-label").html(SLIDER_INITIAL_VAL);

$("#circles-slider").on("slide.selectPip slidechange.selectPip", function(e, ui) {
  var slider_val = $("#circles-slider .ui-slider-pip-selected .ui-slider-label").attr("data-value");
  $("#selected-year-label").html(slider_val);
});

下面的 CSS 编译了以上所有内容，应该适合你：

body {
  font-size: 9pt;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

#slider2 {
  padding: 10px;
  width: 500px;
  background-color: lime;
  display: flex;
}

#circles-slider.ui-slider {
  margin: 1em 1em 2em;
  width: 85%;
}

#circles-slider.ui-slider::before {
  content: "";
  position: absolute;
  right: -4%;
  left: -4%;
  background: #434d5a;
  height: 10px;
  border: none;
  border-radius: 20px;
}

#selected-year-label {
  margin-top: 10px;
  margin-left: 10px;
}

#circles-slider .ui-slider-handle {
  border-radius: 18px;
  height: 18px;
  width: 18px;
  top: -4px;
  margin-left: -9px;
  border: 1px solid white;
}

#circles-slider .ui-slider-pip {
  top: 3px;
}

#circles-slider .ui-slider-pip:nth-child(5n+2) .ui-slider-line {
  background-color: orange;
}

#circles-slider .ui-slider-pip .ui-slider-line {
  width: 4px;
  height: 4px;
  border-radius: 4px;
  margin-left: -2px;
  background: white;
}

#circles-slider .ui-slider-pip.ui-slider-pip-selected-initial {
  font-weight: normal;
}

#circles-slider .ui-slider-pip.ui-slider-pip-selected {
  font-weight: bold;
}

#circles-slider .ui-slider-pip.ui-slider-pip-selected,
#circles-slider .ui-slider-pip.ui-slider-pip-selected-initial {
  color: #434d5a;
}

.ui-slider-pips .ui-slider-label {
  color: black;
  top: 7px;
}

.ui-slider-label {
  margin-top: 6px;
}

Answer 2

演示：

https://plnkr.co/edit/Jdu34XnJi1H732tW7cuq?p=preview

解释：

1. 删除（评论）很多.ui-slider-pip-last 和.ui-slider-pip-first 的东西。因为显然有样式可以使第一个和最后一个标签位置不同。所以让它们下来不需要额外的样式。刚刚删除了原来的。
2. 为灰色背景添加了一个宽度为 108% 的 ::before 伪元素（因为连续点之间的差距为 4%）
3. 为橙色添加了 :nth-child(5n+2) 点数规则