<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>
<body>
<h2>Range Slider</h2>
<p>
<label for="range_weight">Weight: </label>
<input type="range" name="weight" class="slider" min="0" max="100" value="60">
<span class="slider_label"></span>
</p>
<p>
<label for="range_weight">Height: </label>
<input type="range" name="height" class="slider" min="0" max="100" value="8">
<span class="slider_label"></span>
</p>
<p>
<label for="range_weight">Length: </label>
<input type="range" name="length" class="slider" min="0" max="100" value="30">
<span class="slider_label"></span>
</p>
<script>
$(function() {
$('.slider').on('input change', function() {
$(this).next($('.slider_label')).html(this.value);
});
$('.slider_label').each(function() {
let value = $(this).prev().attr('value');
$(this).html(value);
});
})
</script>
</body>
</html>