Color Sliders

RGB color sliders

by trepmal

HTML

<div style="background:#567890;">
    <p>
        <span class="wrap_red"><input class="r ch" type="range" min="0" max="255" /></span>
        <input type="number" min="0" max="255" />
    </p>
    <p>
        <span class="wrap_green"><input class="g ch" type="range" min="0" max="255" /></span>
        <input type="number" min="0" max="255" />
    </p>
    <p>
        <span class="wrap_blue"><input class="b ch" type="range" min="0" max="255" /></span>
        <input type="number" min="0" max="255" />
    </p>
    #<span class="result">567890</span>
</div>
<div style="background:#ddba01;">
    <p>
        <span class="wrap_red"><input class="r ch" type="range" min="0" max="255" /></span>
        <input type="number" min="0" max="255" />
    </p>
    <p>
        <span class="wrap_green"><input class="g ch" type="range" min="0" max="255" /></span>
        <input type="number" min="0" max="255" />
    </p>
    <p>
        <span class="wrap_blue"><input class="b ch" type="range" min="0" max="255" /></span>
        <input type="number" min="0" max="255" />
    </p>
    #<span class="result">ddba01</span>
</div>

CSS

body {
    background: url('http://beta.colorto.me/png/10/row2/bbb/eee/eee/bbb');
    padding-top: 0px;
}
div {
    margin: 40px 0;
    padding: 10px;
}
p {
    margin: 0 0 5px;
}
span {
    background: rgba( 255,255,255,0.2 );
    padding: 0 5px;
}
span.wrap_red {
    background: rgba( 255,100,100,0.2 );
}
span.wrap_green {
    background: rgba( 100,255,100,0.2 );
}
span.wrap_blue {
    background: rgba( 100,100,255,0.2 );
}
.ch {
    width: 200px;
}
input[type="number"] {
    width: 45px;
}

JavaScript

jQuery(document).ready(function() {

    $('div').each(function() {
        var th = $(this);
        hex = th.css('backgroundColor');
        rgb = hex.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        var red = rgb[1];
        var green = rgb[2];
        var blue = rgb[3];

        th.find('.r').val(red);
        th.find('.r').parent('span').siblings('input').val(red);
        th.find('.g').val(green);
        th.find('.g').parent('span').siblings('input').val(green);
        th.find('.b').val(blue);
        th.find('.b').parent('span').siblings('input').val(blue);

        $('input').bind('change keyup click', function() {

            if ($(this).hasClass('ch')) {

                $(this).parent('span').siblings('input').val($(this).val());

            }
            else {
                if ($(this).val() > 255) $(this).val(255);
                if ($(this).val() < 0) $(this).val(0);
                $(this).siblings('span').find('input').val($(this).val());
            }
            r = parseInt(th.find('.r').val()).toString(16);
            if (r.length == 1) r = '0' + r;

            g = parseInt(th.find('.g').val()).toString(16);
            if (g.length == 1) g = '0' + g;

            b = parseInt(th.find('.b').val()).toString(16);
            if (b.length == 1) b = '0' + b;

            x = r + g + b;

            th.find('.result').html(x);
            th.css('backgroundColor', '#' + x);

        });

    });

});