<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="script.js"></script>
<style>
table {
border-collapse: collapse;
}
table,
td,
th {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="Slider"><input type="range" class="sliderInputRange" min="0" max="100" data-value-id="value1"></div>
<b><div id="value1">value: %</div></b>
<div class="Slider"><input type="range" class="sliderInputRange" min="0" max="100" data-value-id="value2"></div>
<b><div id="value2">value: %</div></b>
</body>
</html>
$(window).on("load", function(){
var slider = $(".sliderInputRange");
slider.change(function(){
var value_id= $(this).attr("data-value-id");
$("#" + value_id).html (" value : " + this.value + "%");
});
});