Stylish Value/Range Slider with jQuery and jQuery UI - Slider Pips

Slider Pips is a jQuery plugin that extends the native jQuery UI slider component to add small "pips", "float", "labels" to the slider with plenty of custom API options.

Basic Usage:

1. Load the required jQuery library and jQuery UI's javascript and CSS in the page.

<script src="https://code.jquery.com/ui/1.14.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/flick/jquery-ui.css">

2. Load the jQuery slider pips plugin's javascript and CSS after jQuery library loaded.

<link href="src/css/jquery-ui-slider-pips.css" rel="stylesheet" type="text/css">
<script src="src/js/jquery-ui-slider-pips.js"></script>

3. Create an empty container element for a slider.

<div id="demo"></div>

4. Render a simple value slider in the container you just created. Check out the jQuery UI slider document for more APIs.

var $slider1 = $("#demo").slider({ max: 100 , value: 10 });

5. And then we can apply pips or float to it!

$slider1.slider("pips");

//or floats

$slider1.slider("float");

6. Options and defaults.

// Default options for pips:
$slider.slider("pips", {

    first: "label",   
    // string, boolean
    // eg: "label", "pip" , false
    // determines label for first item on slider.

    last: "label",
    // string, boolean
    // eg: "label", "pip" , false
    // determines label for last item on slider.

    rest: "pip",    
    // string, boolean
    // eg: "label", "pip" , false
    // determines labels for all other items on slider.

    labels: false,
    // array
    // eg: ["Mon","Tues","Weds","Thurs","Fri","Sat","Sun"]
    // provides overrides for the labels so the
    // implementer can visually display a different
    // set of labels to the normal value

    prefix: "",     
    // string
    // eg: "$"
    // allows implementer to show a prefix value before
    // the values on the slider

    suffix: "",
    // string
    // eg: ".00¢"
    // allows implementer to show a suffix value after
    // the values on the slider

    formatLabel: function(val){ return this.prefix + val + this.suffix }

});

// Default options for floats:
$('div.slider').slider('float', {

    handle: true,
    // boolean
    // eg: true, false
    // activates the floats on slider handles

    pips: true,
    // boolean
    // eg: true, false
    // activates the floats on pips

    labels: false,
    // array
    // eg: ["Mon","Tues","Weds","Thurs","Fri","Sat","Sun"]
    // provides overrides for the labels so the
    // implementer can visually display a different
    // set of labels to the normal value

    prefix: "",
    // string
    // eg: "$"
    // allows implementer to show a prefix value before
    // the values on the float

    suffix: "",
    // string
    // eg: ".00¢"
    // allows implementer to show a suffix value after
    // the values on the float
 
    formatLabel: function(val){ return this.prefix + val + this.suffix }

});

Changelog:

v2.0.0 (2025-07-11)

• Some methods were updated to be compatible with jQuery version 4.

v1.11.4 (2016-09-05)

• update

v1.11.1 (2015-11-30)

• update

v1.10.8 (2015-11-24)

• update

v1.10.7 (2015-08-21)

• update

v1.10.6 (2015-07-19)

• update

v1.10.5 (2015-07-06)

• update

v1.10.4 (2015-06-08)

• update

v1.10.3 (2015-06-07)

• Fix IE issues, Fix Animations, Fix Mouse Events

v1.10.2 (2015-06-07)

• Combine the two methods into same object.

v1.10.0 (2015-0517)

• Adding classes for styling to all pips inside of the range values.

v1.9.2 (2015-05-07)

• Fix up the mouseup/down events

v1.9.1 (2015-04-26)

• update.

v1.9.0 (2015-04-06)

• Fixed: Click on Slider Pip Value Events

v1.8.1 (2015-03-22)

• fix a bug with first pip not getting selected class

v1.8.0 (2015-03-08)

• Fixing up the slider to handle multiple handles.
• Improve label selecting a little bit.

v1.7.6 (2015-02-22)

• update

v1.7.5 (2015-01-30)

• update+bugfix

v1.6.2 (2014-09-13)

• Fixed a bug relating to programatically changing the value of a slider

v1.6.1 (2014-08-22)

• Adding in selected classes for the initial values, and for the currently selected also did some minor refactoring

v1.5.7 (2014-08-03)

• Fixed: No Prefix/Suffix on pip floats

v1.5.6 (2014-07-04)

• Fixed: When the slider range is set to "min" or "max", label clicking stops working.

v1.5.5 (2014-05-14)

• step feature revision

v1.5.3 (2014-05-02)

• refactor and slightly tweak css

v1.5.2 (2014-04-29)

• move events out of the the loop
• improve performace
• stop propagation on the mousedown so we dont move sliders when dragging on a label
• add CSS for stopping labels getting selected

v1.5.1 (2014-04-26)

• fix a slight error in event

v1.4 (2014-04-12)

• Merge formatLabel feature

---

This awesome jQuery plugin is developed by simeydotme. For more Advanced Usages, please check the demo page or visit the official website.