If no other parts of jQuery UI are needed; then it is strongly recommended to download a custom build with only the slider included.

First off we're going to need to load the dependencies . This plugin requires jQuery and jQuery UI to function correctly.

Bower will install dependencies, too, so no need to download jQuery as above.

If floats are desired instead of pips, we can call the float method in place of pips :

The default way to use the plugin is to call the pips method on an initialised slider. This will add the markers along the slider, and place the min/max values to the beginning/end of the slider:

If the slider's options have change programmatically, then we probably need to update the pips/floats to reflect this.

There can often by times when you wish to destroy a slider's pips, or floats. It is very simple to achieve just by supplying "destroy" as the parameter instead of an options object.

For example: instead of supplying an option to jQuery to make the pips sit above the slider, we should use CSS to override the positioning of the .ui-slider-pip , .ui-slider-line and .ui-slider-label like so:

To make the code as succinct and performant as possible; there's only minimal javascript configuration on how the pips are displayed, positioned, formatted, etc. Instead the power lies in the hands of CSS .

The plugin makes great use of presentation classes to provide powerful customisation . It's important that the slider fits the unique style of your project, and with slight CSS modification you can get some really interesting results.

Will override the values of the floats with an array of given values. eg: ["Monday", "Tuesday", "Wednesday", ... ] or { "first": "Monday", "last": "Sunday" }

Determines if the float effect should appear on the pips

Determines if the float effect should appear on the slider handle

A list of all the options available on the float method:

Will override the values of the pips with an array of given values. eg: [ "Monday", "Tuesday", "Wednesday", ... ] or { "first": "Monday", "last": "Sunday" }

note: if the slider has a value over 100, step is set to 5% of the value

The step parameter will only generate every nth pip . eg: If we set step: 2 , then we will only get the values: 0, 2, 4, 6, 8... generated.

Determines the style of all other pips on the slider

Determines the style of the first pip on the slider

A list of all the options available on the pips method:

It is possible to supply configuration options to the pips plugin, this allows some basic way to control how the pips/floats are handled.

Show All Labels By default we only show the labels for the first and last points, shown below is an example of labels being applied to all pips. </> ($) <div class="slider"></div> $(".slider") .slider({ max: 12 }) .slider("pips", { rest: "label" });

Hide Labels & Pips It is possible to hide all the pips if we want a slider to show just the min / max values. </> ($) <div class="slider"></div> $(".slider") .slider({ max: 12, range: true, values: [5, 15] }) .slider("pips", { rest: false });

Only Show Pips Instead of having the values shown for the first / last point, we could only show pips . This might be good when we just need to show the user how many options they have without showing explicit values. </> ($) <div class="slider"></div> $(".slider") .slider({ max: 30 }) .slider("pips", { first: "pip", last: "pip" });

Prefix / Suffix If we need to add some content/context to our values, we can specify a prefix and/or suffix to spice things up. It would not be possible with css :before and :after because we already use these psuedo-elements for styling. </> {;} ($) <div class="slider"></div> /* Because of the prefix/suffix we need to shift the labels left a little bit so they are still aligned centrally. */ #prefix-suffix-slider .ui-slider-label { margin-left: -1.75em; } /* We also use a media query so the pips do not crowd-over each other when we get to a small screen size */ @media screen and (max-width: 1040px) { #prefix-suffix-slider .ui-slider-pip:nth-of-type(2n+1) .ui-slider-label { display: none; } } $(".slider") .slider({ min: 0, max: 100, value: 50, step: 10 }) .slider("pips", { rest: "label", prefix: "$", suffix: ".00¢" }); Check out the CSS & JS code, and also try resizing the browser to see the slider respond.

Custom Labels It's possible with rest: "label" to set some custom labels to the slider instead of the default values. It's important to note here that the slider will still return its integer value when $(".slider").slider("value"); is called. </> ($) <div class="slider"></div> // set up an array to hold the months var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; // lets be fancy for the demo and select the current month. var activeMonth = new Date().getMonth(); $(".slider") // activate the slider with options .slider({ min: 0, max: months.length-1, value: activeMonth }) // add pips with the labels set to "months" .slider("pips", { rest: "label", labels: months }) // and whenever the slider changes, lets echo out the month .on("slidechange", function(e,ui) { $("#labels-months-output").text( "You selected " + months[ui.value] + " (" + ui.value + ")"); });

More Custom Labels Here's another example using labels except here we replace roman numbers with the Chinese/Hanzi equivalent. </> {;} ($) <div class="slider"></div> #hanzi-labels-slider { font-family: "SimHei", "Hei", sans-serif; } #hanzi-labels-slider .ui-sliper-pip { font-size: 1.4em; } #hanzi-labels-slider .ui-slider-handle .ui-slider-tip { font-size: 1.4em; width: 42px; margin-left: -22px; height: 33px; line-height: 30px; top: -40px; background: #434d5a; border-color: #434d5a; color: white; } #hanzi-labels-slider .ui-slider-handle .ui-slider-tip:before, #hanzi-labels-slider .ui-slider-handle .ui-slider-tip:after { border-top-color: #434d5a; } var hanzi = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"]; $("#hanzi-labels-slider") .slider({ min: 0, max: hanzi.length-1, value: 3 }) .slider("pips", { rest: "label", labels: hanzi }) .slider("float", { labels: hanzi });

Steps Steps can be a little complicated. The default slider allows us to skip along the slider in a pattern. eg: 0, 20, 40...

Steps are hard-wired in to the slider and so the pips and labels will match the step value. </> ($) <div class="slider"></div> $(".slider") .slider({ min: 0, max: 100, step: 20 }) .slider("pips", { rest: "label" }); 5% Interval If we have more than 100 items on the slider (max - min >= 100) , then the .slider("pips"); method will only show the pips at a 5% interval. This is because we really do not want to be adding thousands of dom elements to the page for the pips . It can have a dramatic effect on performance for the user. Additionally every pip requires it's own pixel on the screen... so if we had more than 1000 pips , we would need a screen size of at least 1000px wide. </> {;} ($) <div class="slider"></div> #steps-fivepercent-slider .ui-slider-tip { visibility: visible; opacity: 1; top: -30px; } $(".slider") .slider({ min: 0, max: 1000, range: true, values: [200, 800] }) .slider("pips", { rest: "label" }) .slider("float"); Multiplicative Steps When a slider has the .slider("pips"); method applied to it, the pips method may also take a step option to allow additional control over the way pips are stepped visually. This option has no effect on the slider's functionality. The step value on the .slider("pips"); method is multiplicative; meaning it will only show every nth step that exists from the main .slider(); method. </> ($) <div class="slider"></div> $(".slider") .slider({ min: 0, max: 1000, step: 100 }) .slider("pips", { rest: "label", step: 2 }) .slider("float"); Step Table To further explain how the multiplicative step option works there is a table below showing the resulting sliders with a selection of different step options. { step: n } "pips", { step: n } Result 1 //default 1 //default 2 1 5 1 1 2 2.5 2 5 2 1 5 0.5 5 3 5 3 2 2.5 3