jQuery UI Slider Pips: Enhancing jQuery Sliders with Labels and Pips Software & Sites 25 MAR 2015

The jQuery UI user interface library, built on top of the excellent jQuery JavaScript library, includes a pretty neat slider control that allows users to select a numeric value by dragging a handle with either the mouse or keys.

However, it is missing a few important things if you want to start using sliders in a little more user friendly, complex way – what it needs is pips (point dashes to indicate length/distance/value range) as well as labels.

Which is exactly why Simon Goellner (aka slimeydotme, or more accurately, slimey.me) went ahead and created the fantastic jQuery UI Slider Pips plugin to, as he puts it:

A plugin to extend the jQuery UI Slider control. This plugin adds “pips” to the slider for visual aid, as well as “labels” which the developer can customize.

It is full featured, well written, and particularly easy to add to any existing slider declaration. More importantly, it is very configurable, making it a must if you want to implement sliders in a more meaningful way.

Installation is as easy as downloading both the .js and .css files, and then running the code is little more than:

<div class="slider"></div>
$(".slider").slider().slider("pips");

(The default way to use the plugin – as shown above – is to call the pips method on an initialised slider. This will add the markers along the slider, and place the min/max values to the beginning/end of the slider).

Well worth a look in other words.

jquery ui slider pips example

Related Link: http://simeydotme.github.io/jQuery-ui-Slider-Pips/

Related Posts:

About Craig Lotter

Software developer, husband and dad to two little girls. Writer behind An Exploring South African. I don't have time for myself any more.