从头开始创建 Jquery UI 滑块
Create Jquery UI Slider from scratch
我是 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.
上构建的滑块
不确定您是否需要 javascript,
试试这个:
<input type="range" min="0" max="5" step="0.5" value="2.5" />
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 的新手,正在尝试自己创建 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.
不确定您是否需要 javascript,
试试这个:
<input type="range" min="0" max="5" step="0.5" value="2.5" />
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>