有时候我们需要一个滑杆滑动,可以移动的同时,还能够获取到从小到大的数值,如图:
向后滑动值越大,能够做到实时监听。我的可能不是最优解决方案,仅供大家参考!
代码如下:
这是建立一个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);
原理就是把负数转化为正数,则最小值变为最大值,最大值反之,即可实现左小右大的效果.