<!DOCTYPE HTML>
<html>
<head>
<style>
#s1, #s2, #s3 {
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: 15px;
}
#p1, #p2, #p3 {
width: 10px;
height: 25px;
border-radius: 3px;
position: relative;
left: 10px;
top: -5px;
background: blue;
cursor: pointer;
}
</style>
</head>
<body>
<div id="s1">
<div id="p1"></div>
</div>
<div id="s2">
<div id="p2"></div>
</div>
<div id="s3">
<div id="p3"></div>
</div>
<script>
function func() {
func.sliders = function(event) {
var parent = this.parentNode; // контейнер ползунка
var thumbCoords = this.getBoundingClientRect();
var shiftX = event.pageX - thumbCoords.left;
var sliderCoords = parent.getBoundingClientRect();
document.onmousemove = function(event) {
var newLeft = event.pageX - shiftX - sliderCoords.left;
if (newLeft < 0) {
newLeft = 0;
}
var rightEdge = parent.offsetWidth - this.offsetWidth;
if (newLeft > rightEdge) {
newLeft = rightEdge;
}
this.style.left = newLeft + 'px';
};
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
};
};
document.getElementById("p1").onmousedown = func.sliders;
document.getElementById("p2").onmousedown = func.sliders;
document.getElementById("p3").onmousedown = func.sliders;
}
func();
</script>
</body>
</html>
Хочу чтоб три слайдера работали от одной функции, которая должна быть методом общей функции.
Как ни пытался не получается.
Помогите разобраться в чем причина?