Господа, интересует только чистый JS. В примере видно, что кликая в определенное место ползунок меняет положение свое, а как сделать так, хочу кликнуть по ползунку и удерживая кнопку мыши менять положение за движением мыши по горизонтали. Ну не соображу ни как логику...
var value;
var rangeWrapper = document.querySelector('#rangeWrapper');
rangeWrapper.addEventListener('mousemove', function(event) {
event = event || window.event;
value = event.offsetX;
})
rangeWrapper.addEventListener('mousedown', function() {
slider.style.left = value + 'px';
})
html,
body {
margin: 0;
width: 100%;
height: 100%;
background: #272727;
}
#rangeWrapper {
position: relative;
margin: 20px auto;
width: 300px;
height: 30px;
}
#slider {
position: absolute;
z-index: 111;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
top: calc(50% - 10px);
}
#triangle {
position: absolute;
margin: 0;
background: orange;
width: 100%;
height: 30px;
clip-path: polygon(0% 50%, 0% 50%, 200% 0%, 100% 75%);
}
<div id="rangeWrapper">
<div id="triangle">
<div id="bg_grad"></div>
</div>
<div id="slider"></div>
</div>