css - 使用圆点自定义 jQuery ui slider

Question

我正在创建一个输入范围 slider ，允许用户在 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. 所选年份位于 slider 右侧
4. 绿地太大，我处理不了。它应该小得多(必须包含 slider 和所选年份的标签)。

我需要帮助。

Answer 1

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

1. 您添加了一些额外的样式，您需要删除这些样式才能使第一个和最后一个标签位于 slider 下方。

#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>

1. 您可以根据需要调整 #slider2 和 .ui-slider 的边距和填充来实现此目的。

为了更新 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;
}