jQuery UI Slider

jQuery UI's slider() widget turns any <div> into a draggable handle for picking a numeric value, such as a price, quantity, or volume. It supports single values, stepped increments, and even two-handle ranges — all built on top of jQuery's event handling.

Quick Reference

Option / Event Description Example
.slider()Turns an element into a draggable slider handle.$('#s').slider();
min / maxThe smallest and largest allowed values.min: 0, max: 100
stepIncrement the handle snaps to while dragging.step: 5
valueInitial handle position (single-value slider).value: 25
slideFires continuously while dragging; read ui.value.slide: function(e, ui){ ... }
range: trueTwo handles for picking a min/max range.range: true, values: [20, 80]
Tip: Use ui.value (single slider) or ui.values (range slider) inside the slide callback to update a visible label as the user drags.

1) Basic Slider


$('#slider').slider();
Try it Yourself »

2) min / max / step


$('#slider').slider({
  min: 0,
  max: 200,
  step: 10
});
Try it Yourself »

3) Initial value


$('#slider').slider({
  value: 25 // handle starts at 25
});
Try it Yourself »

4) slide Event (Live Value)


$('#slider').slider({
  slide: function(e, ui){
    $('#val').text(ui.value); // show the number as it drags
  }
});
Try it Yourself »

5) range: true (Two-Handle Range)


// e.g. a price-range filter
$('#priceSlider').slider({
  range: true,
  min: 0,
  max: 1000,
  values: [200, 800],
  slide: function(e, ui){
    $('#priceLabel').text(ui.values[0] + ' - ' + ui.values[1]);
  }
});
Try it Yourself »

Live Demo

Drag the handle below; its current value is displayed live via the slide event.

Value:

Note: Slider only produces a number — pair it with a hidden <input> if you need to submit the chosen value in a regular HTML form.