New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/jquery-ui-slider-pips/
Jquery UI Slider Pips
Download Demo
Jquery UI Slider Pips - Making jQuery Sliders a little bit nicer
Features
Adds small “pips” and “labels” to the slider
Extends the jQuery UI Slider widget
Easily Configurable
Works for both Horizontal and Vertical sliders
Doesn’t change default slider behaviour
Purely a visual plugin
Requirements:
jQuery (1.9+)
jQuery UI (1.10+)
A Reason to use it
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" type="text/css" href="css/jquery-ui-slider-pips.css"> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script src="//code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <script src="js/jquery-ui-slider-pips.min.js"></script>
2. HTML
<div id="slider2"></div>
3. JAVASCRIPT
$('#slider2').slider().slider('pips').slider('float');
4. OPTIONS
Advanced usage with options:
// First of all attach a slider to an element. $('.element').slider(); // 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, pips: true, labels: ['label1', 'label2', ...], prefix: "", suffix: "" );
Options for pips:
first: ‘pip’ or ‘label’ or false last: ‘pip’ or ‘label’ or false rest: ‘pip’ or ‘label’ or false labels: ['array','of','labels'] or false prefix: “string” suffix: “string” formatLabel: function(val) return this.prefix + val + this.suffix
Options for float:
handle: true or false pips: true or false labels: ['array','of','labels'] or false prefix: “string” suffix: “string” formatLabel: function(val) return this.prefix + val + this.suffix