Source Code:
(back to article)
Submit
Result:
Report an issue
<!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">Negative: </label> <input type="range" name="negative" class="slider" min="-25" max="25" value="-10"> <span class="slider_label"></span> </p> <p> <label for="range_weight">Decimal: </label> <input type="range" name="decimal" class="slider" min="0.001" max="2" value="0.08" step="0.001"> <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>