Jquery JavaScript DHTML





  jQuery UI Slider - Colorpicker
  
  
  
  
  
  
  #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; };
  
  
  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);
  });
  





Simple Colorpicker








Combine three sliders to create a simple RGB colorpicker.