介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能title>滑块& lt;/title>
& lt;才能style>
,,,.len {
,,,,,宽度:,300 px;
,,,,,,身高:6 px;
,,,,,背景:,# 6 c6;
,,,,,这个特性:,3 px;
,,,,,margin-top: 15 px;
,,,,,位置:,相对;
,,,}
,,,.len b {
,,,,,显示:,inline-block;
,,,,,,身高:6 px;
,,,,,这个特性:,3 px;
,,,,,背景:,# 900;
,,,,,位置:,绝对;
,,,}
,,,.len 跨度{
,,,,,位置:,绝对;
,,,,,宽度:,10 px;
,,,,,身高:,10 px;,
,,,,,这个特性:,5 px;
,,,,,背景:,# 090;
,,,,,z - index:, 1;
,,,,,:,2 px;
,,,,,左:,0;
,,,}
,,,.len 输入(type=范围){
,,,,,显示:,没有;
,,,}
& lt;才能/style>
& lt;/head>
& lt; body>
& lt;才能input 类型=皉ange", min=?“, max=? 500年,https://www.yisu.com/zixun/, value=" 0 ">
<>脚本
var范围=document.querySelectorAll(“输入(type=范围)”);
ranges.forEach(函数(范围){
var Div=document.createElement (" Div ");
Div.className=袄肌?
range.parentNode.insertBefore (Div、范围);
var跨度=document.createElement(“跨度”);
var b=document.createElement (" b ");
Div.appendChild(跨度);
Div.appendChild (b);
Div.appendChild(范围);
span.onmousedown=function (e) {
var x=e.clientX-this.offsetLeft;
var maxL=Div.offsetWidth-span.offsetWidth;
var maxV=范围。马克斯| | 100;
document.onmousemove=function (e) {
var les=e.clientX-x;
如果(les <0) les=0;
如果(les> maxL) les=maxL;
span.style.left=les +“px”;
b.style.width=les + span.offsetWidth/2 +“px”;
range.value=les/maxL * maxV;//同步
e.preventDefault ();//阻止默认事件
console.log (range.value)
}
document.onmouseup=function () {
document.onmousemove=零;
document.onmouseup=零;
}
}
}）>
这篇文章主要介绍了JavaScript如何实现美化滑块效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
具体内容如下
<强>美化滑块(拖动)
隐藏原有的范围同步值