cpskins / jquery-ui-slider-pips Goto Github PK

#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:

• 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 and suffix labels and floats - thanks Xeeeveee
  • Fix some bugs, clean up code
  • update demo to show new features

• March 13, 2013 - Update to 1.0
  • Add ability to create custom labels with an array
  • Change number option to label
  • Add labels option
  • CSS style names changed to reflect update ui-slider-pip-value, ui-slider-value .. etc
  • fix various typos

• March 10, 2013 - Update to 0.2
  • Added extension for 'floating' numbers
  • Fixed so that sliders can start with negative numbers

###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 for rest)
• "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)