<p><label for="range_weight">Weight: </label> <input type="range" name="weight" class="slider" min="0" max="100" value="75">
<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="3">
<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="10">
<span class="slider_label"></span></p>body
{
font-family:sans-serif;
}$(function()
{
$('.slider').on('input change', function(){
$(this).next($('.slider_label')).html(this.value);
});
$('.slider_label').each(function(){
var value = $(this).prev().attr('value');
$(this).html(value);
});
})
External CSS
This Pen doesn't use any external CSS resources.