accept,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="lib.js"></script>
<style>
.slider {
border-radius: 5px;
background: #E0E0E0;
background: -moz-linear-gradient(left top , #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
background: linear-gradient(left top, #E0E0E0, #EEEEEE);
width: 310px;
height: 15px;
margin: 5px;
}
.thumb {
width: 10px;
height: 25px;
border-radius: 3px;
position: relative;
left: 0px;
top: -5px;
background: blue;
cursor: pointer;
}
span{
width: 10px;
height: 25px;
border-radius: 3px;
position: relative;
left: 150px;
top: -5px;
background: blue;
cursor: pointer;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="slider" class="slider">
<div class="thumb"></div>
<span>0</span>
</div>
<script>
function fixEvent(e) {
e = e || window.event;
if (!e.target) e.target = e.srcElement;
if (e.pageX == null && e.clientX != null ) { // если нет pageX..
var html = document.documentElement;
var body = document.body;
e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0);
e.pageX -= html.clientLeft || 0;
e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0);
e.pageY -= html.clientTop || 0;
}
if (!e.which && e.button) {
e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : ( e.button & 4 ? 2 : 0 ) )
}
return e;
}
function getCoords(elem) {
var box = elem.getBoundingClientRect();
var body = document.body;
var docElem = document.documentElement;
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop || body.clientTop || 0;
var clientLeft = docElem.clientLeft || body.clientLeft || 0;
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
return { top: Math.round(top), left: Math.round(left) };
}
var sliderElem = document.getElementById('slider');
var thumbElem = sliderElem.children[0];
var span = sliderElem.children[1];
thumbElem.ondragstart = function() { return false; };
thumbElem.onmousedown = function(e) {
e = fixEvent(e);
var thumbCoords = getCoords(thumbElem);
var shiftX = e.pageX - thumbCoords.left;
var shiftY = e.pageY - thumbCoords.top;
var sliderCoords = getCoords(sliderElem);
document.onmousemove = function(e) {
e = fixEvent(e);
// вычесть координату родителя, т.к. position: relative
var newLeft = e.pageX - shiftX - sliderCoords.left;
// курсор ушёл вне слайдера
if (newLeft < 0) {
newLeft = 0;
}
var rightEdge = sliderElem.offsetWidth - thumbElem.offsetWidth;
if (newLeft > rightEdge) {
newLeft = rightEdge;
}
newLeft = Math.round(newLeft/30)*30;
span.innerHTML = newLeft/3;
thumbElem.style.left = newLeft + 'px';
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
};
return false; // disable selection start (cursor change)
};
</script>
</body>
</html>