cityofdreams.site


Stylish jquery image sliders

stylish jquery image sliders

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 sliders 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)

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.



Related news


Style fashion men 2019 classic ultra
Sereia moda praia 2019 1040
Cast saranno famosi anni 80 moda
Fashion of this week in pakistani
Kodona boy style fashion