<p><label for="range_weight">Number 1: </label> <input type="range" name="num1" class="slider" min="-15" max="15" value="-10">
<span class="slider_label"></span></p>
<p><label for="range_weight">Number 2: </label> <input type="range" name="num2" class="slider" min="0.001" max="1" value="0.05" step="0.001">
<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.