Range Slider Widget
Build a dual-handle price range slider using CSS and jQuery touch/mouse events.
jQuery
Beginner
3 min read
Range Slider
Example
// 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> Pro Tip
Native is accessible by default — keyboard arrows work without extra JS.