Для разнообразия
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.bar{
border: solid yellow;
display:inline-block;
cursor: pointer;
}
.cell{
border: solid blue 2px;
display:inline-block;
width:14px;
height:12px;
background: PaleTurquoise;
}
.selected {
background: SteelBlue;
}
</style>
</head>
<body>
<div class = "bar">
<div class = "cell " data-val = "1"></div>
<div class = "cell" data-val = "2"></div>
<div class = "cell" data-val = "3"></div>
<div class = "cell" data-val = "4"></div>
<div class = "cell" data-val = "5"></div>
<div class = "cell" data-val = "6"></div>
</div><br>
<input type="range" min = "-1" max = "5" value = "-1">
<script>
var evnt = ((navigator.userAgent.search(/MSIE/) > -1) ||(navigator.userAgent.search(/Trident/) > -1)) ? "change":"input";
var cell = document.querySelectorAll('.cell'),
set = document.querySelector('[type="range"') ;
set.addEventListener(evnt, function() {
var s = +this.value;
[].forEach.call(cell, function(el, i) {
if(i <= s) el.classList.add('selected');
if(i > s) el.classList.remove('selected');
});
});
</script>
</body>
</html>