UI HSL Color Slider

HSL Color Slider with UI

by Dan Shahin

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css">
<div id="slide-h"></div>
<div id="slide-s"></div>
<div id="slide-l"></div>
<div id="slide-a"></div>
<div id="color"></div>
<button onclick="init();" type="button">Random Color</button>

CSS

.ui-slider {
    margin:10px 10px 10px 20px;
    width: 70%;
}

.ui-slider a {
    text-align: center;
    text-decoration: none;
    width: 30px !important;
    font-size: 8pt;
    text-align: center;
    padding: 3px 0px;
}

#slide-h {
   background: #fff; /* Old browsers */
background: -moz-linear-gradient(left, #ff0000 0%, #ffff00 16.66666666666667%, #00ff00 33.33%, #00fffe 50%, #0000ff 66.66666666666667%, #fe00ff 83.33333333333333%, #ff0000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(16.66666666666667%,#ffff00), color-stop(33.33%,#00ff00), color-stop(50%,#00fffe), color-stop(66.66666666666667%,#0000ff), color-stop(83.33333333333333%,#fe00ff), color-stop(100%,#ff0000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ff0000 0%,#ffff00 16.66666666666667%,#00ff00 33.33%,#00fffe 50%,#0000ff 66.66666666666667%,#fe00ff 83.33333333333333%,#ff0000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ff0000 0%,#ffff00 16.66666666666667%,#00ff00 33.33%,#00fffe 50%,#0000ff 66.66666666666667%,#fe00ff 83.33333333333333%,#ff0000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ff0000 0%,#ffff00 16.66666666666667%,#00ff00 33.33%,#00fffe 50%,#0000ff 66.66666666666667%,#fe00ff 83.33333333333333%,#ff0000 100%); /* IE10+ */
background: linear-gradient(left, #ff0000 0%,#ffff00 16.66666666666667%,#00ff00 33.33%,#00fffe 50%,#0000ff 66.66666666666667%,#fe00ff 83.33333333333333%,#ff0000 100%); /* W3C */
}

#slide-s {
background-color: rgba(255,0,0,1); /* Old browsers */
background-image: -moz-linear-gradient(left,  rgba(127,127,127,1) 0%, rgba(127,127,127,0.5) 50%, rgba(127,127,127,0) 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(127,128,127,1)), color-stop(50%,rgba(127,127,127,0.5)), color-stop(100%,rgba(127,127,127,0))); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(left, ...

JavaScript

$("#slide-h").slider({
    value: 0,
    min: 0,
    max: 360,
    step: 1,
    animate: true,
    slide: function( event, ui ) {
        setHSL($(this).attr('id'), ui.value);
    },
    change: function( event, ui ) {
        setHSL($(this).attr('id'), ui.value);
    }
});
    
$("#slide-s, #slide-l").slider({
    value: 50,
    min: 0,
    max: 100,
    step: 1,
    animate: true,
    slide: function( event, ui ) {
        setHSL($(this).attr('id'), ui.value);
    },
    change: function( event, ui ) {
        setHSL($(this).attr('id'), ui.value);
    }
});

$('#slide-a').slider({
    value: 1,
    min: 0.05,
    max: 1,
    step: 0.05,
    animate: true,
    slide: function( event, ui ) {
        setHSL($(this).attr('id'), ui.value);
    },
    change: function( event, ui ) {
        setHSL($(this).attr('id'), ui.value);
    }
});

setHSL = function(id, value) {
    $('#'+id).children('a').text(value);
    var h = $("#slide-h").slider("value");
    var s = $("#slide-s").slider("value");
    var l = $("#slide-l").slider("value");
    var a = $("#slide-a").slider("value");
    $('#slide-s').css('background-color', 'hsl('+h+', 100%, 50%)');
    $('#slide-l').css('background-color', 'hsl('+h+', 100%, 50%)');
    $('#color').css('background-color', 'hsla('+h+', '+s+'%, '+l+'% ,'+a+')');
};

randomNo = function(mini,maxi) {
    return Math.round(mini+(Math.random()*(maxi-mini)));
};

init = function() {
    var h = randomNo(0, 360);
    var s = randomNo(0, 100);
    var l = randomNo(0, 100);
    $( "#slide-h" ).slider( "value", h );
    $( "#slide-s" ).slider( "value", s );
    $( "#slide-l" ).slider( "value", l );
    $( "#slide-a" ).slider( "value", 1 );
};

init();