从头开始创建Jquery UI Slider

Posted 2021-05-03

我是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代码，让这个滑块实际工作。你可以找到我想在this link上构建的滑块。

答案

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>

另一答案

不确定你需要javascript，

试试这个：

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

以上是关于从头开始创建Jquery UI Slider的主要内容，如果未能解决你的问题，请参考以下文章

jQuery UI Slider对数刻度

处理之前的 jQuery UI Slider 样式

jQuery UI Slider - 最大值（不是滑块的结尾）

jQuery-ui slider - 如何阻止两个滑块相互控制

JQuery UI Slider在使用return false停止后恢复

jQuery Range Slider 使用默认属性值