CSS实现⾃定义滑动条（input），动态监听改变数值有时候我们需要⼀个滑杆滑动，可以移动的同时，还能够获取到从⼩到⼤的数值，如图：
向后滑动值越⼤，能够做到实时监听。我的可能不是最优解决⽅案，仅供⼤家参考！
代码如下：
这是建⽴⼀个input元素，最⼩值为0，最⼤值为100，每次加1，默认值为10.
样式如下：
input[type=“range”] {
display: block;
-webkit-appearance: none;
background-color: #bdc3c7;
width: 150px;
height: 5px;
border-radius: 5px;
margin: 0 auto;
outline: 0;
html滚动效果代码}
input[type=“range”]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #49a9ee;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid white;
cursor: pointer;
transition: 0.3s ease-in-out;
}
input[type=“range”]::-webkit-slider-thumb:hover {
background-color: white;
border: 2px solid #49a9ee;
}
input[type=“range”]::-webkit-slider-thumb:active {
transform: scale(1.6);
}
//js代码监听效果，需要绑定监听事件，代码如下：
var elem = document.querySelector(‘input[type=“range”]’);
//获取⼀个想显⽰值的标签，并且初始化默认值
var target = document.querySelector(’.value’);
target.innerHTML = elem.value;
var rangeValue = function(){
var newValue = elem.value;
target.innerHTML = newValue;
}
//绑定input监听事件
elem.addEventListener(“input”, rangeValue);
代码结束！！
现在实现的效果为左⼩右⼤，如果要实现左⼤右⼩的事件，可以这样写：
最⼩为-100，最⼤为0，默认值为-10，
js代码监听效果，需要绑定监听事件，代码如下：
var elem = document.querySelector(‘input[type=“range”]’);
//获取⼀个想显⽰值的标签，并且初始化默认值
var target = document.querySelector(’.value’);
target.innerHTML = Math.abs(elem.value);
var rangeValue = function(){
var newValue = Math.abs(elem.value); //把获取到的值转化为正整数，
target.innerHTML = newValue;
}
//绑定input监听事件
elem.addEventListener(“input”, rangeValue);
原理就是把负数转化为正数，则最⼩值变为最⼤值，最⼤值反之，即可实现左⼩右⼤的效果.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。