5 <title>jQuery UI Slider - Colorpicker</title>
6 <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7 <script src="../../jquery-1.9.1.js"></script>
8 <script src="../../ui/jquery.ui.core.js"></script>
9 <script src="../../ui/jquery.ui.widget.js"></script>
10 <script src="../../ui/jquery.ui.mouse.js"></script>
11 <script src="../../ui/jquery.ui.slider.js"></script>
12 <link rel="stylesheet" href="../demos.css">
25 background-image: none;
27 #red .ui-slider-range { background: #ef2929; }
28 #red .ui-slider-handle { border-color: #ef2929; }
29 #green .ui-slider-range { background: #8ae234; }
30 #green .ui-slider-handle { border-color: #8ae234; }
31 #blue .ui-slider-range { background: #729fcf; }
32 #blue .ui-slider-handle { border-color: #729fcf; }
35 function hexFromRGB(r, g, b) {
41 $.each( hex, function( nr, val ) {
42 if ( val.length === 1 ) {
43 hex[ nr ] = "0" + val;
46 return hex.join( "" ).toUpperCase();
48 function refreshSwatch() {
49 var red = $( "#red" ).slider( "value" ),
50 green = $( "#green" ).slider( "value" ),
51 blue = $( "#blue" ).slider( "value" ),
52 hex = hexFromRGB( red, green, blue );
53 $( "#swatch" ).css( "background-color", "#" + hex );
56 $( "#red, #green, #blue" ).slider({
57 orientation: "horizontal",
64 $( "#red" ).slider( "value", 255 );
65 $( "#green" ).slider( "value", 140 );
66 $( "#blue" ).slider( "value", 60 );
70 <body class="ui-widget-content" style="border:0;">
72 <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
73 <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
78 <div id="green"></div>
81 <div id="swatch" class="ui-widget-content ui-corner-all"></div>
83 <div class="demo-description">
84 <p>Combine three sliders to create a simple RGB colorpicker.</p>