html5 数字范围选择,HTML5输入类型范围显示范围值

如果你想显示在滑块下方的电流值，并与它一起移动，试试这个：

MySliderValue

MySliderValue

var myRange = document.querySelector('#myRange');

var myValue = document.querySelector('#myValue');

var myUnits = 'myUnits';

var off = myRange.offsetWidth/(parseInt(myRange.max) - parseInt(myRange.min));

var px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetParent.offsetWidth/2);

myValue.parentElement.style.left = px + 'px';

myValue.parentElement.style.top = myRange.offsetHeight + 'px';

myValue.innerHTML = myRange.value + ' ' + myUnits;

myRange.oninput =function(){

let px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetWidth/2);

myValue.innerHTML = myRange.value + ' ' + myUnits;

myValue.parentElement.style.left = px + 'px';

};

请注意，此类型的HTML输入元素具有一个隐藏功能，例如，当元素具有焦点时，可以使用左/右/下/上箭头键移动滑块。与Home/End/PageDown/PageUp键相同。

1：