Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
// Simple single-range slider with live value display $(function() { const $slider = $("#price-range"), $display = $("#price-display"); $slider.on("input change", function() { $display.text("$" + this.value); const pct = (this.value - this.min) / (this.max - this.min) * 100; $(this).css("background", `linear-gradient(to right, #0d6efd ${pct}%, #dee2e6 ${pct}%)`); }).trigger("input"); }); // HTML: <input type="range" id="price-range" min="0" max="500" value="250" step="10"> // <span id="price-display"></span>
Result
Open