Stylish Value/Range Slider with jQuery and jQuery UI - Slider Pips
File Size: | 28.8 KB |
---|---|
Views Total: | 13265 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/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 } });
Change logs:
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.