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">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>