Настройте пользовательский слайдер jQuery с помощью круглых пипсов - PullRequest
Новая
       52

Настройте пользовательский слайдер jQuery с помощью круглых пипсов

0 голосов
/ 23 июня 2018

Я создаю ползунок диапазона ввода, который позволяет пользователю выбирать год в диапазоне 1992-2017. Я использую Best jQuery-библиотеку .

Вот что я создал: 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
});

Вот что я хотел бы получить:

enter image description here

Я почти у цели. Я хотел бы, однако, что:

  1. все метки находятся ниже серой линии (даже метки начала 1992 года и конца 2017 года)
  2. точки, относящиеся к годам с меткой, имеют другой цвет, чем другие (в данном случае они оранжевые)
  3. выбранный год располагается справа от ползунка
  4. зеленое пространство слишком большое, я не могу справиться с этим. Он должен быть намного меньше (необходимо содержать ползунок и метку выбранного года).

Мне нужна помощь.

Ответы [ 2 ]

0 голосов
/ 26 июня 2018

Демо-версия:

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

Пояснение:

  1. Удалено (прокомментировано) множество материалов .ui-slider-pip-last и .ui-slider-pip-first. Потому что, видимо, были стили, чтобы по-разному размещать первую и последнюю позицию лейбла. Так что заставьте их спуститься, не нужно никаких дополнительных стилей. Только что удалил оригинальные.
  2. Добавлен ::before псевдоэлемент шириной 108% (поскольку разрыв между последовательными пипсами составляет 4%) для серого bg
  3. Добавлено правило для :nth-child(5n+2) пунктов оранжевого цвета
0 голосов
/ 26 июня 2018

DEMO : 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. Я сделал это, используя гибкий макет на слайдере 2 и установив ширину .ui-слайдера 85%. Таким образом, ваш HTML должен выглядеть так: 

<div id='slider2'>
  <div id="circles-slider">
  </div>
  <span id="selected-year-label"></span>
</div>
  1. Вы можете сделать это, играя с полем и отступами # 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;
}
...