jQuery UI Slider - Colorpicker : UI Slider « jQuery « JavaScript DHTML






jQuery UI Slider - Colorpicker

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Slider - Colorpicker</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.slider.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  #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; }
  #demo-frame > div.demo { padding: 10px !important; };
  </style>
  <script type="text/javascript">
  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;">

<div class="demo">

<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>

</div><!-- End demo -->

<div class="demo-description" style="clear:left;">

<p>Combine three sliders to create a simple RGB colorpicker.</p>

</div><!-- End demo-description -->

</body>
</html>

   
    
  








Related examples in the same category

1.jQuery UI Slider - Default functionality
2.jQuery UI Slider - Multiple sliders
3.jQuery UI Slider - Range slider
4.jQuery UI Slider - Range with fixed maximum
5.jQuery UI Slider - Range with fixed minimum
6.jQuery UI Slider - Vertical range slider
7.jQuery UI Slider - Vertical slider
8.jQuery UI Slider - Snap to increments
9.Set step value for slider
10.Slider events: change, slide, start, stop
11.Three sliders share one event handler
12.Set the max value for slider