jQuery UI & Slider: Colorpicker

This entry is part 5 of 11 in the series jQuery UI Slider

jQuery UI Slider – Colorpicker

Combine three sliders to create a simple RGB colorpicker.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Slider - Colorpicker</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='http://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        #red, #green, #blue {
            float: left;
            clear: left;
            width: 300px;
            margin: 15px;
        }

        #swatch {
            width: 120px;
            height: 100px;
            margin-top: 18px;
            margin-left: 350px;
            background-image: none;
        }

        #red .ui-slider-range {
            background: #ef2929;
        }

        #red .ui-slider-handle {
            border-color: #ef2929;
        }

        #green .ui-slider-range {
            background: #8ae234;
        }

        #green .ui-slider-handle {
            border-color: #8ae234;
        }

        #blue .ui-slider-range {
            background: #729fcf;
        }

        #blue .ui-slider-handle {
            border-color: #729fcf;
        }
    </style>
    <script>
        function hexFromRGB(r, g, b) {
            var hex = [
                r.toString(16),
                g.toString(16),
                b.toString(16)
            ];
            $.each(hex, function (nr, val) {
                if (val.length === 1) {
                    hex[ nr ] = '0' + val;
                }
            });
            return hex.join('').toUpperCase();
        }
        function refreshSwatch() {
            var red = $('#red').slider('value'),
                    green = $('#green').slider('value'),
                    blue = $('#blue').slider('value'),
                    hex = hexFromRGB(red, green, blue);
            $('#swatch').css('background-color', '#' + hex);
        }
        $(function () {
            $('#red, #green, #blue').slider({
                orientation: 'horizontal',
                range: 'min',
                max: 255,
                value: 127,
                slide: refreshSwatch,
                change: refreshSwatch
            });
            $('#red').slider('value', 255);
            $('#green').slider('value', 140);
            $('#blue').slider('value', 60);
        });
    </script>
</head>
<body class='ui-widget-content' style='border:0;'>

<p class='ui-state-default ui-corner-all ui-helper-clearfix' style='padding:4px;'>
    <span class='ui-icon ui-icon-pencil' style='float:left; margin:-2px 5px 0 0;'></span>
    Simple Colorpicker
</p>

<div id='red'></div>
<div id='green'></div>
<div id='blue'></div>

<div id='swatch' class='ui-widget-content ui-corner-all'></div>


</body>
</html>
Try The Code Slider Widgets API Doc
Series Navigation<< jQuery UI & Slider: Vertical range slider
jQuery UI & Slider: Range with fixed minimum >>

Leave a comment

Leave a Reply