Недописанный мной плагин для vanilla.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<style>
html{
width: 100%;
height: 100%;
}
body{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.slider{
display: inline-block;
width: 300px;
border: 1px solid #ccc;
border-radius: 2px;
height: 16px;
position: relative;
}
.slider.vertical{
width: 16px;
height: 300px;
}
.slider .track{
position: absolute;
left: 6px;
right: 6px;
height: 100%;
}
.slider .thumb{
display: inline-block;
width: 10px;
height: 22px;
vertical-align: middle;
border: 1px solid rgb(160, 236, 255);
border-radius: 2px;
position: absolute;
left: 0;
box-shadow: 0 0 3px rgb(57, 57, 57);
background: rgb(223, 223, 223);
top: -4px;
margin-left: -6px;
}
.slider.vertical .thumb{
width: 22px;
height: 10px;
left: -4px;
top: 0;
margin-left: 0;
margin-top: -6px;
}
</style>
<input type="range" max="100">
<span class="slider " tabindex="0">
<span class="track">
<span class="thumb"></span>
</span>
</span>
<input type="text" id="out" />
<script>
(function() {
var slider = document.querySelector('.slider');
var thumb = slider.querySelector('.thumb');
var isVertical = slider.classList.contains('vertical');
if (isVertical) {
thumb.style.top = 0;
} else {
thumb.style.left = 0;
}
var startPos;
var curPos = 0;
var pos = 0;
var value = 0;
var max = 100;
var maxPos = 0;
thumb.addEventListener('mousedown', function(e) {
startPos = isVertical ? e.clientY : e.clientX;
e.preventDefault();
slider.focus();
maxPos = isVertical ? (slider.clientHeight - thumb.offsetHeight) : (slider.clientWidth - thumb.offsetWidth);
document.addEventListener('mousemove', onmove);
document.addEventListener('mouseup', onup);
});
slider.addEventListener('keydown', function(e) {
switch (e.keyCode) {
case 37:
if (!isVertical) {
stepUp();
e.preventDefault();
}
break;
case 39:
if (!isVertical) {
stepDown();
e.preventDefault();
} break;
}
});
function stepUp() {
if (value > 0) {
value -= 1;
pos = value * maxPos / max;
updatePos();
}
}
function stepDown() {
if (value < max) {
value += 1;
pos = value * maxPos / max;
updatePos();
}
}
function updatePos() {
var fn = function() {
if (isVertical)
thumb.style.top = pos / (maxPos)*100 + '%';
else
thumb.style.left = pos / (maxPos)*100 + '%';
};
window.requestAnimationFrame(fn);
}
var onmove = function(e) {
var mousePos = isVertical ? e.clientY : e.clientX;
pos = mousePos - startPos + curPos;
if (pos < 0)
pos = 0;
if (pos > maxPos)
pos = maxPos;
updatePos();
value = pos / (maxPos) * max;
// out.value = Math.round(value);
};
var onup = function(e) {
document.removeEventListener('mousemove', onmove);
document.removeEventListener('mouseup', onup);
};
})();
</script>
</body>
</html>