#jQuery-ui-Slider-Pips
###Plugin for adding little 'pips' and labels to a jQuery UI slider widget.
This plugin extends the jQuery UI Slider widget.
check out the Demo / Docs:
http://simey.me/projects/jquery-ui-slider-pips/
###Changlog:
- Nov 22, 2013 - CSS Changes
- Aug 28, 2013 - Update to
1.2
- Convert to a grunt/node setup
- Clean up code with jshint
- Remove legacy demo
- June 20, 2013 - Update to
1.1
- Add ability to
prefix
andsuffix
labels and floats - thanks Xeeeveee - Fix some bugs, clean up code
- update demo to show new features
- Add ability to
- March 13, 2013 - Update to
1.0
- March 10, 2013 - Update to
0.2
###Requirements:
- jQuery (1.9+)
- jQuery UI (1.10+)
- A Reason to use it
###Usage:
Include the plugin javascript file after jquery-ui.
Include the CSS file, edit as you please.
// First of all attach a slider to an element.
$('.element').slider({opts});
// Then you can give it pips and labels!
$('.element').slider('pips', {
first: 'label',
last: 'label',
rest: 'pip',
labels: ['label1', 'label2', ...],
prefix: "",
suffix: ""
});
// And finally can add floaty numbers (if desired)
$('.element').slider('float', {
handle: true,
numbers: true,
prefix: "",
suffix: ""
});
// methods can (and probably should) be chained:
$('.element').slider().slider('pips').slider('float');
#####Pips method takes the options: first, last, rest
with the values of:
"pip"
- adds a pip. (default forrest
)"label"
- adds a pip and a number. (default forfirst
&last
)false
- hides the number and pip.
#####Pips method also can have option of: labels
with values of:
false
- defaults labels to be numberic value[array]
- array of values to apply to pips
#####Float method takes the options: handle, numbers
with the values of:
true
- adds floaty number. (default)false
- no floaty number.
#####Pips and Float methods both take the options: prefix, suffix
with the values of:
""
- no prefix/suffix. (default)"prefix"
- a string prefixed/suffixed.
###Customisation:
All customisation should be done to the CSS file, or in your own CSS.
The base styles I've provided do a decent job in the Demo,
but they will need tweaking to suit your needs and UI theme.
###Compatibility:
Modern Browsers, IE7+
(will need some CSS work for IE7 display issues, I'm not interested in doing them :P)