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;
}
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);

代码结束！！

https://www.tuwenku.net/ 中的压缩图片文件大小就是用的此例。

现在实现的效果为左小右大，如果要实现左大右小的事件，可以这样写：

最小为-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);

原理就是把负数转化为正数，则最小值变为最大值，最大值反之，即可实现左小右大的效果.