Создать Jquery UI Slider с нуля - PullRequest
Новая
       23

Создать Jquery UI Slider с нуля

0 голосов
/ 07 сентября 2018

Я новичок в Javascript и пытаюсь создать собственный слайдер диапазонов Jquery UI самостоятельно. Ниже приведен код HTML и CSS для этой задачи. 

#slider {
  position: relative;
  height: 15px;
  width: 400px;
  margin: 10px;
  border: 1px solid #c5c5c5;
}

.ui-slider {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: rgb(246, 246, 246);
  border: 1px solid #c5c5c5;
  left: 50%;
  top: -4.5px;
  border-radius: 3px;
}

.ui-slider:hover {
  background-color: rgb(237, 237, 237);
}
<div id="slider">
  <span class="ui-slider"></span>
</div>

Теперь я думаю, что какое-то событие javascript должно быть присоединено к элементу span, чтобы он скользил взад и вперед. Должен ли я использовать mouseDown или onDrag прослушиватели событий для этой задачи? Пожалуйста, помогите мне написать код JavaScript, чтобы этот слайдер действительно работал. Вы можете найти слайдер, который я хочу построить на этой ссылке .

Ответы [ 2 ]

0 голосов
/ 12 сентября 2018 

var sliderSpan = document.getElementById("slider-span");
var slider = document.getElementById("slider");

sliderSpan.onmousedown = function(event) {
  var sliderCoords = getCoords(slider);
  var sliderSpanCoords = getCoords(sliderSpan);
  var shift = event.pageX - sliderSpanCoords.left;

  document.onmousemove = function(event) {
    var left =
      ((event.pageX - shift - sliderCoords.left) / sliderCoords.width) * 100;
    if (left < 0) left = 0;
    if (left > 100) left = 100;
    sliderSpan.style.left = left + "%";
  };
  document.onmouseup = function() {
    document.onmousemove = document.onmouseup = null;
  };
  return false;
};

function getCoords(elem) {
  var box = elem.getBoundingClientRect();
  return {
    top: box.top + pageYOffset,
    left: box.left + pageXOffset,
    width: box.right - box.left
  };
}
#slider {
  position: relative;
  height: 15px;
  width: 400px;
  margin: 10px;
  border: 1px solid #c5c5c5;
}

.ui-slider {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: rgb(246, 246, 246);
  border: 1px solid #c5c5c5;
  left: 0%;
  top: -4.5px;
  border-radius: 3px;
  margin-left: -10px;
}

.ui-slider:hover {
  background-color: rgb(237, 237, 237);
}
<div id="slider">
  <span class="ui-slider" id="slider-span"></span>
</div>
0 голосов
/ 07 сентября 2018

Не уверен, что вам нужен javascript для этого,

попробуйте это: 

<input type="range" min="0" max="5" step="0.5" value="2.5" />
...