DivMan,
css .i { float: left; } проще считать длину всех блоков.
сдвигать надо пропорционально максимальный скролл к длине ползунка.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.main{width: 300px; overflow: hidden;border: 1px solid;}
.slider {
background: #f6e6b4;
background: radial-gradient(ellipse at center, #f6e6b4 0%,#ed9017 100%);
width: 310px;
height: 15px;
margin: 0;
border-radius: 3px;
position:relative;
margin-bottom: 20px;
}
.thumb{
position: relative;
width: 15px;
height: 30px;
top: -7.5px;
background: #258dc8;
background: linear-gradient(to bottom, #258dc8 0%,#258dc8 100%);
border-radius: 4px;
cursor: pointer;
}
.img{
width: 800px;
height: 50px;
position: relative;
}
.i {
float: left;
vertical-align: top;
width: 50px;
height: 50px;
}
.blue{
background: blue;
}
.green{
background: green;
}
.yellow{
background: yellow;
}
.red{
background: red;
}
</style>
</head>
<body>
<div id="slider" class="slider">
<div class="thumb"></div>
</div>
<div class="price">0.00</div>
<div class="main">
<div class="img">
<div class="i blue"></div>
<div class="i green"></div>
<div class="i yellow"></div>
<div class="i red"></div>
<div class="i blue"></div>
<div class="i green"></div>
<div class="i yellow"></div>
<div class="i red"></div>
<div class="i blue"></div>
<div class="i green"></div>
<div class="i yellow"></div>
</div>
</div>
<script>
var thumb = slider.querySelector(".thumb");
var img = document.querySelector(".img");
var main = document.querySelector(".main");
var max = slider.clientWidth - thumb.offsetWidth;
var i = img.querySelectorAll(".i");
var maxWidth = [].reduce.call(i, function(width, elem) {
return width += elem.scrollWidth
}, 0);
var maxScroll = maxWidth - main.clientWidth;
var price = document.querySelector(".price");
var maxPrice = 182;
thumb.onmousedown = function(e) {
var xShift = e.clientX - thumb.offsetLeft;
document.onmousemove = function(e) {
var current = e.clientX - xShift;
if (current < 0) current = 0;
else if (current > max) current = max;
thumb.style.left = current + "px";
img.style.left = -current / max * maxScroll + "px";
price.innerHTML = (current / max * maxPrice).toFixed(2);
};
document.onmouseup = function(e) {
document.onmousemove = document.onmouseup = ""
}
};
</script>
</body>
</html>
