Jquery UI Slider Touch Punch test

ColorPicker example with Touch Punch for Mobile slider response test.

by Rich Costello

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<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>

CSS

#red,
  #green,
  #blue {
    float: left;
    clear: left;
    width: 300px;
    margin: 15px;
  }
  
  #swatch {
    width: 120px;
    height: 120px;
    margin-top: 18px;
    margin-left: 350px;
    background-image: none;
  }
  #swatch p {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
  }
  
  #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;
  }

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).html("<p>#" + hex + "</p>");
}

$(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);
});