从头开始创建 Jquery UI 滑块

Question

我是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代码以使此滑块实际工作。你可以找到我想在此链接上构建的滑块。

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

Answer 2

不确定你需要javascript，

试试这个：

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