从头开始创建 Jquery UI Slider答案

【问题标题】：Create Jquery UI Slider from scratch从头开始创建 Jquery UI Slider
【发布时间】：2018-09-07 07:06:30
【问题描述】：

我是 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 上找到我想构建的滑块。

【问题讨论】：

实际上，不清楚你问的是什么。您当然可以实现一个滑块并为其附加一些事件。但是我们应该如何说你想要对什么事件做出反应呢？
@arkascha 我在问我应该使用哪个事件来使span 能够像我在相关链接中指定的那样来回滑动。

标签： javascript html dom-events jquery-ui-slider

【解决方案1】：

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>

【讨论】：

【解决方案2】：

不确定是否需要 javascript，

试试这个：

&lt;input type="range" min="0" max="5" step="0.5" value="2.5" /&gt;

【讨论】：

我知道这一点。但是，我想创建类似于 Jquery UI 提供的自定义范围输入。
@nicat9507 还不够类似于 jQueryUI 范围？这个例子对你来说缺少什么？