Slider Pips Making jQuery Sliders a little bit nicer

Example

</>
($)

go from this...

to this!

                                <div class="slider"></div>
                            
                                $(".slider").slider().slider("pips").slider("float");
                            

Getting Started

Skip this if using Bower

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

                        <!-- include the jQuery and jQuery UI scripts -->
                        <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
                        <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
                
                        <!-- plus a jQuery UI theme, here I use "flick" -->
                        <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/flick/jquery-ui.css">
                    

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

Installation

There's 2 options; either get the latest files from Github, or it's possible to use Bower to manage dependencies.

Github

JS CSS

right-click, save as

Bower

$ bower install jquery-ui-slider-pips --save

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

Basic usage

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:

</>
($)
                                    <!-- the HTML must have an element to reference, here we've 
                                        created a div with the class "slider" to reference in jQuery -->
                    
                                    <div class="slider"></div>
                                
                                    // to create the slider on the page we use jQuery to select the element
                                    // from the HTML and apply the .slider() method, then we apply the pips afterwards.
                    
                                    $(".slider").slider().slider("pips");
                                

Float

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

</>
($)
                                    <!-- Your HTML must have an element to reference, here we've 
                                        created a div with the class "slider" to reference in jQuery -->
                    
                                    <div class="slider"></div>
                                
                                    // we still select the jQuery element from the HTML like before, 
                                    // but now we supply the float method instead of pips.
                    
                                    $(".slider").slider().slider("float");
                                

Customisation

Options

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

                            $(".slider")
                                .slider()
                                .slider("pips", {
                                    /* options go here as an object */
                                })
                                .slider("float", {
                                    /* options go here as an object */
                                })
                        

Pips

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

Option Values Default Description
first "label", "pip" or false "label"

Determines the style of the first pip on the slider

last "label", "pip" or false "label"

Determines the style of the final pip on the slider

rest "label", "pip" or false "pip"

Determines the style of all other pips on the slider

step number 1 / 5%

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.

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

labels array or object or false false

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

prefix string ""

Adds a string value before the pip label.
eg: prefix: $ => $1, $2, $3, $4, ...

suffix string ""

Adds a string value after the pip label.
eg: suffix: °c => 1°c, 2°c, 3°c, 4°c, ...

Float

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

Option Values Default Description
handle boolean true

Determines if the float effect should appear on the slider handle

pips boolean false

Determines if the float effect should appear on the pips

labels array or object or false false

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

prefix string ""

Adds a string value before the float label.
eg: prefix: $ => $1, $2, $3, $4, ...

suffix string ""

Adds a string value after the float label.
eg: suffix: °c => 1°c, 2°c, 3°c, 4°c, ...

Styling

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.

                            /* here is a list of the presentation 
                                classes used in a heirarchical tree. */
                            
                            .ui-slider
                            .ui-slider-pips {}
                            .ui-slider-float {}
                                .ui-slider-handle {}
                                    .ui-slider-tip {}
                                .ui-slider-pip {}
                                .ui-slider-pip-nth {}
                                    .ui-slider-line {}
                                    .ui-slider-label {}
                                    .ui-slider-tip-label {}
                                .ui-slider-pip-hide {}
                                .ui-slider-pip-last {}
                                .ui-slider-pip-first {}
                                .ui-slider-pip-label {}
                                .ui-slider-pip-inrange {}
                                .ui-slider-pip-initial {}
                                .ui-slider-pip-selected {}
                                .ui-slider-pip-initial-nth {}
                                .ui-slider-pip-selected-nth {}
                    
                        

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.

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:

Before
After
                                    /* using default css */
                                
                                    /* customised css */
                    
                                    #styling-after-slider {
                                        margin-top: 3em; 
                                    }
                                    #styling-after-slider .ui-slider-pip {
                                        top: -12px; 
                                    }
                                    #styling-after-slider .ui-slider-pip .ui-slider-label {
                                        top: -18px; 
                                    }
                                

Destroy Method

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.

Pips
Float
                                    // initialise the slider, and pips first
                                    $(".slider")
                                        .slider()
                                        .slider("pips");
                    
                                    // after a slider has been inialised
                                    $(".slider")
                                        .slider()
                                        .slider("pips", "destroy");
                                
                                    // initialise the slider, and float first
                                    $(".slider")
                                        .slider()
                                        .slider("float");
                    
                                    // after a slider has been inialised
                                    $(".slider")
                                        .slider()
                                        .slider("float", "destroy");
                                

Refresh Method

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

Pips
Float
                                    // initialise the slider, and pips first
                                    $(".slider")
                                        .slider({ max: 10 })
                                        .slider("pips");
                    
                                    // then change and option, and refresh the pips
                                    $(".slider")
                                        .slider("options", "max", 20 )
                                        .slider("pips", "refresh");
                                
                                    // initialise the slider, and float first
                                    $(".slider")
                                        .slider({ max: 10 })
                                        .slider("float");
                    
                                    // then change and option, and refresh the float
                                    $(".slider")
                                        .slider("options", "max", 20 )
                                        .slider("float", "refresh");
                                

Examples

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

Vertical Sliders

All functionality that we've seen so far will also apply to vertical sliders. There's no limitation here except that your CSS may have to be slightly different to account for the slider being vertical.

</>
{;}
($)
                                    <div class="slider"></div>
                                
                                    #vertical-slider {
                                        height: 150px;
                                        margin-left: 30px;
                                    }
                                
                                    $(".slider")
                    
                                        .slider({ 
                                            min: 0, 
                                            max: 20,
                                            orientation: "vertical"
                                        })
                    
                                        .slider("pips", {
                                            rest: "label",
                                            step: "5"
                                        });
                                

Styling

Circular Pips

Here's a quick example showing that it's possible to move the pips inside the slider area. We've given them a thicker, rounded appearance with a minimal feel. Also the first and last pips are positioned at the beginning and end of the slider, respectively. — Be sure to check out the css to see how it's done!

</>
{;}
($)
                                    <div id="circles-slider"></div>
                                
                                    #circles-slider.ui-slider {
                                      border-radius: 20px;
                                      background: #434d5a;
                                      border: none;
                                      height: 10px;
                                      margin: 1em 4em 4em; }
                    
                                    #circles-slider .ui-slider-handle {
                                      border-radius: 23px;
                                      height: 23px;
                                      width: 23px;
                                      top: -7px;
                                      margin-left: -11px;
                                      border: 2px solid #fffaf7; }
                    
                                    #circles-slider .ui-slider-pip {
                                      top: 3px; }
                    
                                      #circles-slider .ui-slider-pip .ui-slider-line {
                                        width: 4px;
                                        height: 4px;
                                        border-radius: 4px;
                                        margin-left: -2px;
                                        background: #fffaf7; }
                    
                                      #circles-slider .ui-slider-pip.ui-slider-pip-last,
                                      #circles-slider .ui-slider-pip.ui-slider-pip-first {
                                        top: -7px; }
                    
                                        #circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-line,
                                        #circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-line {
                                          display: none; }
                    
                                        #circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label,
                                        #circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
                                          margin: 0; }
                    
                                      #circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
                                        left: -2em;
                                        text-align: right; }
                    
                                      #circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label {
                                        left: 2em;
                                        text-align: left; }
                    
                                      #circles-slider .ui-slider-pip.ui-slider-pip-selected-initial {
                                        font-weight: normal; }
                    
                                      #circles-slider .ui-slider-pip.ui-slider-pip-selected {
                                        font-weight: bold; }
                    
                                      #circles-slider .ui-slider-pip.ui-slider-pip-selected,
                                      #circles-slider .ui-slider-pip.ui-slider-pip-selected-initial {
                                        color: #434d5a; }
                    
                                
                                    $("#circles-slider")
                                        .slider({
                                            max: 10,
                                            value: 5
                                        })
                                        .slider("pips");
                                

Alternating Labels

We create a slider with many labels and handles which would be crushed together with no space to read them usually. So also we use some clever CSS3 to set the :nth-child(even) pips to float upwards instead; creating this attractive alternating effect. We also add some nice colors and label effects to show which pips are selected. — Be sure to check out the css to see how it's done!

</>
{;}
($)
                                    <div id="alternating-slider"></div>
                                
                                    #alternating-slider .ui-slider-pip .ui-slider-line {
                                      height: 8px;
                                      top: -5px; }
                                    
                                    #alternating-slider .ui-slider-pip:nth-child(even) {
                                      top: -33px;
                                      height: 15px;
                                      transform: scale(0.8) translateY(3px);
                                      opacity: 0.8; }
                                      
                                      #alternating-slider .ui-slider-pip:nth-child(even) .ui-slider-line {
                                        top: 22px;
                                        height: 9px; }
                                      
                                      #alternating-slider .ui-slider-pip:nth-child(even).ui-slider-pip-selected-1 .ui-slider-label, 
                                      #alternating-slider .ui-slider-pip:nth-child(even).ui-slider-pip-selected-2 .ui-slider-label, 
                                      #alternating-slider .ui-slider-pip:nth-child(even).ui-slider-pip-selected-3 .ui-slider-label, 
                                      #alternating-slider .ui-slider-pip:nth-child(even).ui-slider-pip-selected-4 .ui-slider-label {
                                        top: -3px; }
                    
                                    #alternating-slider .ui-slider-pip-initial-1 .ui-slider-label {
                                      color: #E80949; }
                    
                                    #alternating-slider .ui-slider-pip-initial-2 .ui-slider-label {
                                      color: #FF03CB; }
                    
                                    #alternating-slider .ui-slider-pip-initial-3 .ui-slider-label {
                                      color: #C309E8; }
                    
                                    #alternating-slider .ui-slider-pip-initial-4 .ui-slider-label {
                                      color: #920AFF; }
                    
                                    #alternating-slider .ui-slider-pip-selected-1 .ui-slider-label,
                                    #alternating-slider .ui-slider-pip-selected-2 .ui-slider-label,
                                    #alternating-slider .ui-slider-pip-selected-3 .ui-slider-label,
                                    #alternating-slider .ui-slider-pip-selected-4 .ui-slider-label {
                                      color: white;
                                      width: 2.4em;
                                      padding: 4px 0;
                                      margin-left: -1.2em;
                                      border-radius: 2px; }
                    
                                    #alternating-slider .ui-slider-pip-selected-1 .ui-slider-label {
                                      background-color: #E80949; }
                    
                                    #alternating-slider .ui-slider-pip-selected-2 .ui-slider-label {
                                      background-color: #FF03CB; }
                    
                                    #alternating-slider .ui-slider-pip-selected-3 .ui-slider-label {
                                      background-color: #C309E8; }
                    
                                    #alternating-slider .ui-slider-pip-selected-4 .ui-slider-label {
                                      background-color: #920AFF; }
                    
                                    #alternating-slider .ui-slider-tip {
                                      width: 34px;
                                      margin-left: -17px;
                                      top: -1px;
                                      background: #00c7d7;
                                      color: white;
                                      border: none;
                                      line-height: 27px;
                                      height: 25px; }
                    
                                      #alternating-slider .ui-slider-tip:before, 
                                      #alternating-slider .ui-slider-tip:after {
                                        display: none; }
                    
                                    #alternating-slider .ui-slider-handle.ui-state-active .ui-slider-tip,
                                    #alternating-slider .ui-slider-handle.ui-state-focus .ui-slider-tip,
                                    #alternating-slider .ui-slider-handle.ui-state-hover .ui-slider-tip,
                                    #alternating-slider .ui-slider-handle:focus .ui-slider-tip,
                                    #alternating-slider .ui-slider-handle:hover .ui-slider-tip {
                                      top: -1px; }
                    
                                    #alternating-slider .ui-slider-handle.ui-state-focus {
                                      z-index: 100; }
                    
                                
                                    $("#alternating-slider")
                                      .slider({
                                          max: 1000,
                                          values: [0, 300, 700, 1000]
                                      })
                                      .slider("pips", {
                                          step: 25,
                                          rest: "label",
                                          labels: { first: "Min", last: "Max" }
                                      })
                                      .slider("float");
                                

Scale Slider

We have an example, here, of a slider set up with a range and in the pips plugin we tell it to use labels for every single value (-50 ~ 50) but we've hidden all the labels with display:none; and then used css3 :nth-of-type(10n+3) to show every 10th label — Be sure to check out the css to see how it's done!

</>
{;}
($)
                                    <div id="scale-slider"></div>
                                
                                    #scale-slider.ui-slider {
                                      border-radius: 0px;
                                      background: #c7cdd5;
                                      border: none;
                                      height: 2px;
                                      margin: 1em 4em 4em; }
                                      
                                      #scale-slider.ui-slider .ui-slider-range {
                                        background: linear-gradient(to right, #434d5a 0%, #00c7d7 50%, #434d5a 100%)
                                        border: 1px solid rgba(67, 77, 90, 0.5);
                                        height: 4px;
                                        top: -1px;
                                        transition: all 0.2s ease-out; }
                    
                                    #scale-slider .ui-slider-handle {
                                      border-radius: 2px;
                                      height: 20px;
                                      width: 12px;
                                      top: -26px;
                                      border: none; }
                                      
                                      #scale-slider .ui-slider-handle:nth-of-type(n+1) {
                                        transform: rotateZ(-10deg);
                                        margin-left: -9px; }
                                      
                                      #scale-slider .ui-slider-handle:nth-of-type(n+2) {
                                        transform: rotateZ(10deg);
                                        margin-left: -3px; }
                                      
                                      #scale-slider .ui-slider-handle:after {
                                        content: "";
                                        border: 6px solid transparent;
                                        width: 0;
                                        height: 0;
                                        position: absolute;
                                        bottom: -11px;
                                        border-top-color: #434d5a; }
                                      
                                      #scale-slider .ui-slider-handle.ui-slider-handle.ui-state-focus:after,
                                      #scale-slider .ui-slider-handle.ui-slider-handle.ui-state-hover:after,
                                      #scale-slider .ui-slider-handle.ui-slider-handle.ui-state-active:after {
                                        border-top-color: #00c7d7; }
                    
                                    #scale-slider .ui-slider-pip {
                                      top: 2px; }
                                      
                                      #scale-slider .ui-slider-pip .ui-slider-label {
                                        display: none;
                                        background: rgba(67, 77, 90, 0);
                                        color: #434d5a;
                                        border-radius: 4px;
                                        padding: 0.3em 0;
                                        width: 2.4em;
                                        margin-left: -1.2em;
                                        transition: all 0.2s ease-out; }
                                      
                                      #scale-slider .ui-slider-pip .ui-slider-line {
                                        height: 4px; }
                                      
                                      #scale-slider .ui-slider-pip:nth-of-type(5n+3) .ui-slider-line {
                                        height: 8px; }
                                      
                                      #scale-slider .ui-slider-pip:nth-of-type(10n+3) .ui-slider-line {
                                        height: 12px; }
                                      
                                      #scale-slider .ui-slider-pip:nth-of-type(10n+3) .ui-slider-label {
                                        top: 16px;
                                        display: block; }
                                      
                                      #scale-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-line {
                                        margin-left: -1px; }
                                      
                                      #scale-slider .ui-slider-pip.ui-slider-pip-selected .ui-slider-label, 
                                      #scale-slider .ui-slider-pip.ui-slider-pip-selected-first .ui-slider-label, 
                                      #scale-slider .ui-slider-pip.ui-slider-pip-selected-second .ui-slider-label {
                                        background: rgba(67, 77, 90, 0.7);
                                        color: #fffaf7; }
                                
                                    $("#scale-slider")
                                        .slider({
                                            max: 50,
                                            min: -50,
                                            values: [-20, 20],
                                            range: true
                                        })
                                        .slider("pips", {
                                            rest: "label"
                                        });
                                

Rainbow Color Picker

Lets create an imaginary slider where the user is asked to choose a color, instead of a number. We can achieve this by using labels set to each point on the slider, but then use some nice CSS to show alternating colors on different sides of the bar and also add colours to each pip label. — Be sure to check out the css to see how it's done!

</>
{;}
($)
                                    <div id="rainbow-slider"></div>
                                
                                  #rainbow-slider {
                                    background: linear-gradient(to right, #720000 0%, #ff4c4c 16%, #f7f733 32%, #3be240 50%, #6dccff 68%, #ca5aed 84%, #4c0041 100%);
                                    background-repeat: no-repeat;
                                    background-size: cover;
                                    border-radius: 30px;
                                    border: none;
                                    box-shadow: inset 0 0 0px 1px rgba(0, 0, 0, 0.18);
                                    height: 10px; }
                    
                                    #rainbow-slider .ui-slider-handle {
                                      background: rgba(255, 255, 255, 0.21);
                                      border-color: rgba(0, 0, 0, 0.56);
                                      box-shadow: inset 0 0 2px 2px rgba(255, 255, 255, 0.89);
                                      border-radius: 20px;
                                      top: -8px; }
                    
                                      #rainbow-slider .ui-slider-handle.ui-state-hover, 
                                      #rainbow-slider .ui-slider-handle:hover, 
                                      #rainbow-slider .ui-slider-handle.ui-state-focus, 
                                      #rainbow-slider .ui-slider-handle:focus, 
                                      #rainbow-slider .ui-slider-handle.ui-state-active {
                                        background: rgba(255, 255, 255, 0.21); }
                    
                                    #rainbow-slider .ui-slider-pip .ui-slider-label {
                                      width: 6em;
                                      margin-left: -3em; }
                    
                                      #rainbow-slider .ui-slider-pip .ui-slider-label[data-value="0"] { color: #720000; }
                                      #rainbow-slider .ui-slider-pip .ui-slider-label[data-value="1"] { color: #ff4c4c; }
                                      #rainbow-slider .ui-slider-pip .ui-slider-label[data-value="2"] { color: #ed6b25; }
                                      #rainbow-slider .ui-slider-pip .ui-slider-label[data-value="3"] { color: #f7f733; }
                                      #rainbow-slider .ui-slider-pip .ui-slider-label[data-value="4"] { color: #8beb3a; }
                                      #rainbow-slider .ui-slider-pip .ui-slider-label[data-value="5"] { color: #3be240; }
                                      #rainbow-slider .ui-slider-pip .ui-slider-label[data-value="6"] { color: #46dbce; }
                                      #rainbow-slider .ui-slider-pip .ui-slider-label[data-value="7"] { color: #6dccff; }
                                      #rainbow-slider .ui-slider-pip .ui-slider-label[data-value="8"] { color: #ad6bef; }
                                      #rainbow-slider .ui-slider-pip .ui-slider-label[data-value="9"] { color: #ca5aed; }
                                      #rainbow-slider .ui-slider-pip .ui-slider-label[data-value="10"] { color: #4c0041; }
                    
                                    #rainbow-slider .ui-slider-pip .ui-slider-line {
                                      top: 1px; }
                    
                                    #rainbow-slider .ui-slider-pip:nth-of-type(odd) {
                                      top: auto;
                                      bottom: 32px; }
                    
                                      #rainbow-slider .ui-slider-pip:nth-of-type(odd) .ui-slider-line {
                                        top: 21px; }
                    
                                
                                  var rainbow = ["Infra-Red", "Red", "Orange", "Yellow", 
                                    "Lime", "Green", "Turquoise", "Blue", 
                                    "Indigo", "Violet", "Ultra-Violet"];
                    
                                  $("#rainbow-slider")
                                      .slider({
                                          max: rainbow.length - 1,
                                          min: 0,
                                          value: 8
                                      })
                                      .slider("pips", {
                                          rest: "label",
                                          labels: rainbow
                                      });
                                

Flat Slider

Here's a nice example of a modern, flat style slider using pips. There are no labels so this kind of slider would be purely visual without much help to the user for knowing their real chosen value. In this example we make use of the .ui-slider-pip-inrange class to create the nice "filled in" effect on the pips.

The style is borrowed from Ana Tudor's codepen which she states is taken from somewhere else. (I couldn't find the source).

Be sure to check out the css to see how it's done!

</>
{;}
($)
                                  <div id="flat-slider"></div>
                    
                                  <div class="vertical">
                                    
                                    <div id="flat-slider-vertical-1"></div>
                                    <div id="flat-slider-vertical-2"></div>
                                    <div id="flat-slider-vertical-3"></div>
                    
                                  </div>
                    
                                
                                  #flat-slider.ui-slider {
                                    background: #d5cebc;
                                    border: none;
                                    border-radius: 0; }
                    
                                    #flat-slider.ui-slider .ui-slider-handle {
                                      width: 20px;
                                      height: 20px;
                                      border-radius: 50% 50% 0;
                                      border-color: transparent;
                                      transition: border 0.4s ease; }
                    
                                      #flat-slider.ui-slider .ui-slider-handle.ui-state-hover, 
                                      #flat-slider.ui-slider .ui-slider-handle.ui-state-focus, 
                                      #flat-slider.ui-slider .ui-slider-handle.ui-state-active {
                                        border-color: #172f38; }
                    
                                    #flat-slider.ui-slider .ui-slider-pip .ui-slider-line {
                                      background: #d5cebc;
                                      transition: all 0.4s ease; }
                    
                                    #flat-slider.ui-slider.ui-slider-horizontal {
                                      height: 6px; }
                    
                                      #flat-slider.ui-slider.ui-slider-horizontal .ui-slider-handle {
                                        -webkit-transform: rotateZ(45deg);
                                                transform: rotateZ(45deg);
                                        top: -25px;
                                        margin-left: -10px; }
                    
                                      #flat-slider.ui-slider.ui-slider-horizontal .ui-slider-pip {
                                        top: 10px; }
                    
                                        #flat-slider.ui-slider.ui-slider-horizontal .ui-slider-pip .ui-slider-line {
                                          width: 2px;
                                          height: 10px;
                                          margin-left: -1px; }
                    
                                        #flat-slider.ui-slider.ui-slider-horizontal .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line {
                                          height: 20px; }
                    
                                        #flat-slider.ui-slider.ui-slider-horizontal .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
                                          height: 12px; }
                    
                                    #flat-slider.ui-slider.ui-slider-vertical {
                                      width: 6px;
                                      height: 125px;
                                      display: inline-block;
                                      margin: 0 15%; }
                    
                                      #flat-slider.ui-slider.ui-slider-vertical .ui-slider-handle {
                                        -webkit-transform: rotateZ(-45deg);
                                                transform: rotateZ(-45deg);
                                        left: -25px;
                                        margin-bottom: -10px; }
                    
                                      #flat-slider.ui-slider.ui-slider-vertical .ui-slider-pip {
                                        left: 10px; }
                    
                                        #flat-slider.ui-slider.ui-slider-vertical .ui-slider-pip .ui-slider-line {
                                          height: 2px;
                                          width: 10px;
                                          margin-top: -1px; }
                    
                                        #flat-slider.ui-slider.ui-slider-vertical .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line {
                                          width: 20px; }
                    
                                        #flat-slider.ui-slider.ui-slider-vertical .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
                                          width: 12px; }
                    
                                        #flat-slider.ui-slider.ui-slider-vertical .ui-slider-handle .ui-slider-tip,
                                        #flat-slider.ui-slider.ui-slider-vertical .ui-slider-handle[class*=ui-state-] .ui-slider-tip {
                                          visibility: visible;
                                          opacity: 1;
                                          border: none;
                                          background: transparent;
                                          left: 50%;
                                          width: 30px;
                                          margin-left: -15px;
                                          text-align: center;
                                          color: white;
                                          font-weight: normal;
                                          top: 10px;
                                          -webkit-transform: rotateZ(45deg);
                                                  transform: rotateZ(45deg); }
                    
                                          #flat-slider.ui-slider.ui-slider-vertical .ui-slider-handle .ui-slider-tip:before,
                                          #flat-slider.ui-slider.ui-slider-vertical .ui-slider-handle[class*=ui-state-] .ui-slider-tip:before {
                                            display: none; }
                    
                                  #flat-slider .ui-slider-handle,
                                  #flat-slider .ui-slider-range,
                                  #flat-slider .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
                                  #flat-slider .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
                                    background-color: #25daa5; }
                    
                    
                                  #flat-slider-vertical-1 .ui-slider-handle,
                                  #flat-slider-vertical-1 .ui-slider-range,
                                  #flat-slider-vertical-1 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
                                  #flat-slider-vertical-1 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
                                    background-color: #f27793; }
                    
                    
                                  #flat-slider-vertical-2 .ui-slider-handle,
                                  #flat-slider-vertical-2 .ui-slider-range,
                                  #flat-slider-vertical-2 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
                                  #flat-slider-vertical-2 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
                                    background-color: #bd77f2; }
                    
                    
                                  #flat-slider-vertical-3 .ui-slider-handle,
                                  #flat-slider-vertical-3 .ui-slider-range,
                                  #flat-slider-vertical-3 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
                                  #flat-slider-vertical-3 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
                                    background-color: #67c3ec; }
                    
                                
                                  $("#flat-slider")
                                      .slider({
                                          max: 50,
                                          min: 0,
                                          range: true,
                                          values: [15, 35]
                                      })
                                      .slider("pips", {
                                          first: "pip",
                                          last: "pip"
                                      });
                    
                                  $("#flat-slider-vertical-1, #flat-slider-vertical-2, #flat-slider-vertical-3")
                                      .slider({
                                          max: 25,
                                          min: 0,
                                          range: "min",
                                          value: 20,
                                          orientation: "vertical"
                                      })
                                      .slider("pips", {
                                          first: "pip",
                                          last: "pip"
                                      })
                                      .slider("float");
                                

Double Labels

One of the users of the pips plugin popped up on Github and asked for some info on how to add more than one label (above and below the slider) on issue #77. It was a good question, and a nice solution, so it's posted here for teaching purposes.

Basically we just supply custom html for the labels and then style it up.

Look at the jQuery to see how it's done!

</>
{;}
($)
                                  <div id="double-label-slider"></div>
                    
                                
                                  #double-label-slider.ui-slider {
                                    margin-top: 24px;
                                    height: 6px;
                                    background: #dddddd;
                                    border: none;
                                    border-radius: 0; }
                    
                                    #double-label-slider.ui-slider .ui-slider-handle {
                                      background: #25daa5;
                                      border: none;
                                      width: 18px;
                                      height: 18px;
                                      margin-left: -9px;
                                      border-radius: 100%;
                                      transition: box-shadow 0.2s ease; }
                    
                                      #double-label-slider.ui-slider .ui-slider-handle.ui-state-hover, 
                                      #double-label-slider.ui-slider .ui-slider-handle.ui-state-focus, 
                                      #double-label-slider.ui-slider .ui-slider-handle.ui-state-active {
                                        box-shadow: 0 0 0 2px #25daa5; }
                    
                                    #double-label-slider.ui-slider .ui-slider-pip {
                                      top: -3px; }
                    
                                      #double-label-slider.ui-slider .ui-slider-pip .ui-slider-line {
                                        background: white;
                                        width: 12px;
                                        height: 12px;
                                        margin-left: -6px;
                                        box-shadow: 0 0 0 2px #25daa5;
                                        border-radius: 100%;
                                        transition: all 0.4s ease; }
                    
                                      #double-label-slider.ui-slider .ui-slider-pip .ui-slider-label,
                                      #double-label-slider.ui-slider .ui-slider-pip .ui-slider-label i,
                                      #double-label-slider.ui-slider .ui-slider-pip .ui-slider-label span {
                                        width: 100px;
                                        margin-left: -50px;
                                        text-align: center; }
                    
                                      #double-label-slider.ui-slider .ui-slider-pip .ui-slider-label {
                                        color: #888888; }
                    
                                        #double-label-slider.ui-slider .ui-slider-pip .ui-slider-label i {
                                          font-style: normal;
                                          font-size: 1.8em;
                                          position: absolute;
                                          top: -36px; }
                    
                                          @media screen and (max-width: 500px) {
                                            #double-label-slider.ui-slider .ui-slider-pip .ui-slider-label i {
                                              font-size: 1.4em; } 
                                        }
                    
                                        #double-label-slider.ui-slider .ui-slider-pip .ui-slider-label span {
                                          opacity: 0.6;
                                          font-size: 1.2em;
                                          line-height: 1.3;
                                          position: absolute;
                                          top: 18px;
                                          transition: opacity 0.3s ease; }
                    
                                          @media screen and (max-width: 500px) {
                                            #double-label-slider.ui-slider .ui-slider-pip .ui-slider-label span {
                                              font-size: 1.1em; } 
                                          }
                    
                                      #double-label-slider.ui-slider .ui-slider-pip:hover .ui-slider-label span, 
                                      #double-label-slider.ui-slider .ui-slider-pip:focus .ui-slider-label span, 
                                      #double-label-slider.ui-slider .ui-slider-pip.ui-slider-pip-selected .ui-slider-label span {
                                        opacity: 1; }
                    
                                      #double-label-slider.ui-slider .ui-slider-pip.ui-slider-pip-selected .ui-slider-label {
                                        color: black; }
                    
                                
                                  var doubleLabels = [
                    
                                      "<i>-2</i><span>I hated it</span>", 
                                      "<i>-1</i><span>I was displeased</span>", 
                                      "<i>0</i><span>I have no feelings</span>", 
                                      "<i>+1</i><span>I liked it</span>", 
                                      "<i>+2</i><span>I am easily excited</span>"
                    
                                  ];
                    
                                  $("#double-label-slider")
                                      .slider({
                                          max: 2,
                                          min: -2,
                                          value: 0,
                                          animate: 400
                                      })
                                      .slider("pips", {
                                          rest: "label",
                                          labels: doubleLabels
                                      });
                                

Emoji !!! 😎

Here we have some fun with Emoji! There's not a lot of CSS in this slider, instead the styling is done mostly with javascript. — Be sure to check out the css and then the js to see how it's done!

</>
{;}
($)

What's your favourite animal?!

                                    <div id="emoji-slider"></div>
                                
                                    #emoji-slider {
                                      height: 5px;
                                      margin-top: 100px; }
                                      
                                      #emoji-slider .ui-slider-handle {
                                        top: -6px;
                                        height: 16px;
                                        width: 16px;
                                        transform: rotateZ(45deg); }
                                      
                                      #emoji-slider .ui-slider-pip {
                                        top: -50px;
                                        margin-left: -1.2em; }
                                      
                                      #emoji-slider .emoji {
                                        max-height: 2em;
                                        transform: scale(0.9);
                                        transition: transform 0.2s ease-out; }
                                        @media screen and (max-width: 950px) {
                                          #emoji-slider .emoji {
                                            transform: scale(0.7); } }
                                      
                                      #emoji-slider .ui-slider-pip-selected .emoji {
                                        transform: scale(1.3) translateY(-5px); }
                                        @media screen and (max-width: 950px) {
                                          #emoji-slider .ui-slider-pip-selected .emoji {
                                            transform: scale(1.1) translateY(-5px); } }
                                      
                                      #emoji-slider .ui-slider-line {
                                        display: none; }
                    
                    
                                
                                    // store the array of animals for use later in the slider
                                    // taken from apps.timwhitlock.info <3
                                    var emoji = [ "🐌", "🐐", "🐘", "🐙", "🐞", "🐠", "🐈", "🐕", "🐦", "🐬", "🐖", "🐇", "🐅", "🐃" ],
                                        // my favourite is a dog! of course!
                                        mine = "🐕";
                    
                                    $("#emoji-slider")
                                        
                                        // create a slider with 14 values (0-13)
                                        // and the default is a cat, obviously! ( emoji[6] === "🐈" )
                                        .slider({
                                            max: 13,
                                            value: 6
                                        })
                                        
                                        // now activate the pips and set it to have labels for all
                                        // items, and then set the labels to the array of animals from earlier
                                        .slider("pips", {
                                            rest: "label",
                                            labels: emoji
                                        })
                                        
                                        // whenever the slider changes value, we want to update the
                                        // text above the slider with a kawaii message!
                                        .on("slidechange", function( e, ui ) {
                                                
                                                // save the messages into variables
                                                var mineIs = ( emoji[ui.value] === mine ) ? "Mine too!! 😂✌" : "But mine is a " + mine + "! 😞",
                                                    yoursIs = "Oh golly gosh, your favourite animal is a " + emoji[ui.value] + "? — " + mineIs;
                                                
                                                // fade the question out quickly (using css)
                                                $(".emoji-slider-question")
                                                    .css({ opacity: 0 });
                                                
                                                // then fade it back in with the new message
                                                // and use a custom function to display the emoji.
                                                setTimeout(function() {
                    
                                                    $(".emoji-slider-question")
                                                        .html( yoursIs )
                                                        .twemoji()
                                                        .css({ opacity: 1 });
                    
                                                }, 200 );
                    
                                        
                                        });
                    
                                    // lastly after the slider is initialised we need to
                                    // tell it to display out emoji on every label, but this
                                    // is a custom function, you can find it at github
                                    $("#emoji-slider .ui-slider-label").twemoji();
                    
                                

Browser Support




  • 7+


Any feedback on issues or compatibility problems in certain browsers is greatly appreciated, please leave it at my github page.

Although the slider should function corrently in IE7+, you may find that some of the CSS styles can not be applied correctly to IE7. This is just a matter of doing a little CSS work to style the slider how you like.