1 $.fn.extend({

     2     /*

     3      * Set background to solid color

     4      */

     5     background_color: function (r, g, b, a) {

     6         if (a == undefined)

     7             a = 1.0;

     8 

     9         this.css('background', 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')');

    10     },

    11 });

    12 

    13 function color_slider_slide (event, ui) {

    14     // $(this).css('background', 'rgba(0, 0, 0, ' + (ui.value / 255) + ')');

    15 

    16     $('#color').background_color(

    17             $('#slider-r').slider('value'),

    18             $('#slider-g').slider('value'),

    19             $('#slider-b').slider('value')

    20     );

    21     

    22     $(['r', 'g', 'b']).each(function (i, c) {

    23         var value = $('#slider-' + c).slider('value');

    24         var input = $('#' + c);

    25         var color = {r: 0, g: 0, b: 0};

    26         

    27         color[c] = 255;

    28 

    29         input.val(value.toString(16));

    30         input.background_color(color.r, color.b, color.g, value / 255);

    31     });

    32 }

    33 

    34 $(function () {

    35     $('.color-slider').slider({

    36         orientation:    'horizontal',

    37         range:          'min',

    38         min:            0,

    39         max:            255,

    40 

    41         slide:          color_slider_slide,

    42     });

    43     

    44     $(['r', 'g', 'b']).each(function (i, c) {

    45         var input = $('#' + c);

    46         var value;

    47 

    48         if (input.val())

    49             value = parseInt(input.val(), 16);

    50         else

    51             value = 0;

    52         

    53         $('#slider-' + c).slider('value', value);

    54     });

    55 });