Multi Slider - Color Picker

by Roydon DSouza

HTML

<div class="demo">
 
  <div id="slider-range"></div> 
     <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;width:100%" /> 
</div>

<script>
        $(function() {
        $( "#slider-range" ).slider({
            range: true,
            min: 0,
            max: 100,
            values: [ 10,20,30,40,50,60,70,80,90,100],
            slide: function( event, ui ) {
                $( "#amount" ).val( "" + ui.values[ 0 ]
                                    + " - "
                                    + ui.values[ 1 ] 
                                    + " - "
                                    + ui.values[ 2 ] 
                                    + " - "
                                    + ui.values[ 3 ]
     + " - "
                                    + ui.values[ 4 ]
     + " - "
                                    + ui.values[ 5 ]
     + " - "
                                    + ui.values[ 6 ]
     + " - "
                                    + ui.values[ 7 ]
     + " - "
                                    + ui.values[ 8 ]
     + " - "
                                    + ui.values[ 9 ] 
    );
            }
        });
                $( "#amount" ).val( "" + $( "#slider-range" ).slider( "values", 0 )
                                    + " - "
                                    + $( "#slider-range" ).slider( "values", 1 )
                                    + " - "
                                    + $( "#slider-range" ).slider( "values", 2 )
                                    + " - "
                                    + $( "#slider-range" ).slider( "values", 3 )
      + " - "
                                    + $( "#slider-range" ).slider( "values", 4 )
      + " - "
                                    + $( "#slider-range" ).slider( "values", 5 )
      + " - "
                                    + $( "#slider-range" ).slider( "values", 6 )
      + " - "
                                    + $( "#slider-range"...

CSS

body{
    padding:30px;
}
#demo-frame > div.demo { padding: 10px !important; };
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
}
.ui-widget .ui-widget {
    font-size: 1em;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1em;
}
.ui-widget-content {
    background: url("images/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% #FFFFFF;
    border: 1px solid #AAAAAA;
    color: #222222;
}
.ui-widget-content a {
    color: #222222;
}
.ui-widget-header {
    background: url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") repeat-x scroll 50% 50% #CCCCCC;
    border: 1px solid #AAAAAA;
    color: #222222;
    font-weight: bold;
}
.ui-widget-header a {
    color: #222222;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: url("images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6;
    border: 1px solid #D3D3D3;
    color: #555555;
    font-weight: normal;
}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
    color: #555555;
    text-decoration: none;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    background: url("images/ui-bg_glass_75_dadada_1x400.png") repeat-x scroll 50% 50% #DADADA;
    border: 1px solid #999999;
    color: #212121;
    font-weight: normal;
}
.ui-state-hover a, .ui-state-hover a:hover {
    color: #212121;
    text-decoration: none;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background: url("images/ui-bg_glass_65_ffffff_1x400.png") repeat-x scroll 50% 50% #FFFFFF;
    border: 1px solid #AAAAAA;
    color: #212121;
    font-weight: normal;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color:...

JavaScript

/*
 * jQuery UI Slider 1.8.16
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Slider
 *
 * Depends:
 *    jquery.ui.core.js
 *    jquery.ui.mouse.js
 *    jquery.ui.widget.js
 */
(function( $, undefined ) {

// number of pages in a slider
// (how many times can you page up/down to go through the whole range)
var numPages =10;

$.widget( "ui.slider", $.ui.mouse, {

    widgetEventPrefix: "slide",

    options: {
        animate: false,
        distance: 0,
        max: 100,
        min: 0,
        orientation: "horizontal",
        range: false,
        step: 1,
        value: 0,
        values: null
    },

    _create: function() {
        var self = this,
            o = this.options,
            existingHandles = this.element.find( ".ui-slider-handle" ).addClass( "ui-state-default ui-corner-all" ),
            handle = "<a class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a>",
            handleCount = ( o.values && o.values.length ) || 1,
            handles = [];

        this._keySliding = false;
        this._mouseSliding = false;
        this._animateOff = true;
        this._handleIndex = null;
        this._detectOrientation();
        this._mouseInit();

        this.element
            .addClass( "ui-slider" +
                " ui-slider-" + this.orientation +
                " ui-widget" +
                " ui-widget-content" +
                " ui-corner-all" +
                ( o.disabled ? " ui-slider-disabled ui-disabled" : "" ) );

        this.range = $([]);

        if ( o.range ) {
            if ( o.range === true ) {
                if ( !o.values ) {
                    o.values = [ this._valueMin(), this._valueMin() ];
                }
                /*edit
                if ( o.values.length && o.values.length !== 2 ) {
                    o.values = [ o.values[0], o.values[0] ];
       ...