A Quick Demo of the
jQuery ui Slider Pips plugin extension

Follow me on twitter: @simeydotme or codepen: simeydotme
or fork it on github and help make it better :)


Examples


$('.slider1').slider('pips');

The default configuration of the points.
NB: All sliders have been initialised by jQuery UI first

$('.slider2').slider('pips', { 
	rest: 'label' 
});

Here we tell the rest of the points to be labels.

$('.slider3').slider('pips', { 
	rest: false 
});

Here we ask the plugin to hide the rest of the points. Example also shows working with range.

$('.slider4').slider('pips', { 
	first: 'pip', 
	last: 'pip'
});

Here we ask the plugin to show pips for the first and last point (no labels).

$('.slider41').slider('pips', { 
	rest: 'label',  
	prefix: '$' , 
	suffix: '.00'
});

Here we have all labels, but crucially we supply a prefix and suffix.
NB: both prefix and suffix are optional and may require slight css tweaks

With Labels


$('.slider21').slider('pips', { 
	rest: 'label', 
	labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
});

Here we tell the rest of the points to be labels.
We are also assigning custom labels for each pip.

Vertical Sliders


$('.slider5').slider('pips', { 
	rest: false 
});

Here are hiding the rest of the points again. Example of vertical slider.

$('.slider6').slider('pips', { 
	first: 'pip', 
	last: 'pip' 
});

Here we ask the plugin to show pips for the first and last point, the rest are defaulted.

Floating Labels Plugin


$('.slider7').slider('float');

We can also have a slider with floating labels

$('.slider8').slider('pips').slider('float');

If we've already got pips, we can float those, too. (hover the pips).

$('.slider9')
	.slider('pips', { 
		rest: false, 
		prefix: "°", 
		suffix: "c" 
	}).slider('float', { 
		labels: false, 
		prefix: "°" , 
		suffix: "c" 
	});

And here's an example of the prefix and suffix on both the pips and the floats.

NB: both prefix and suffix are optional and may require slight css tweaks