индикатор с регулятором
<!DOCTYPE html>
<html>
<head>
<title>Untitled Page</title>
<style>
td { position:relative;
width:20px;
height:150px;
padding: 0px;
}
.back {position:absolute;
left:0px;
bottom:0px;
width:100%;
background-color:red;
z-index:-1;
}
.slider { margin: 5px; height: 150px; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function () {
$(".slider").slider({
orientation: "vertical",
min: 0,
max: 100,
step: 10,
value: 50
});
var rows = $('tr'),
lights = rows.find('.back'),
slides = rows.find('.slider'),
currHeight;
function loop() {
for (var i = 0; i < lights.length; i++) {
currHeight = Math.random() * $(slides[i]).slider('values',0);
$(lights[i]).css('height', currHeight + "%");
}
setTimeout(loop, 200);
}
loop();
})
</script>
</head>
<body>
<table border="1px">
<tr>
<td><div class="back"></div></td>
<td><div class="back"></div></td>
<td><div class="back"></div></td>
<td><div class="back"></div></td>
<td><div class="back"></div></td>
</tr>
<tr>
<td><div class="slider"></div></td>
<td><div class="slider"></div></td>
<td><div class="slider"></div></td>
<td><div class="slider"></div></td>
<td><div class="slider"></div></td>
</tr>
</table>
</body>
</html>