Range Slider
Display the current value of an <input type="range"> in real time as the user drags the slider.
jQuery
Beginner
3 min read
Range Slider with Live Value
Example
<input type="range" id="budget" min="100" max="10000" step="100" value="1000">
<div>Budget: $<span id="budgetDisplay">1000</span></div>
<script>
$("#budget").on("input", function() {
$("#budgetDisplay").text($(this).val());
});
</script> Pro Tip
Use the "input" event for real-time updates while dragging, not "change" which fires on release.