title: jQuery slider dynamically changing image
body: <p>I am trying to use the jQuery UI slider to dynamically change the RGB values of an image. The issue that I am running into is that the slider will not slide when it is attached to my function that should change the values.</p>
  
  <p>Here is my code so far:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" href="../css/base/jquery.ui.all.css"&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt; 
      &lt;script src="../js/ui/jquery.ui.core.js"&gt;&lt;/script&gt;
      &lt;script src="../js/ui/jquery.ui.widget.js"&gt;&lt;/script&gt;
      &lt;script src="../js/ui/jquery.ui.mouse.js"&gt;&lt;/script&gt;
      &lt;script src="../js/ui/jquery.ui.slider.js"&gt;&lt;/script&gt;&gt;
      &lt;style&gt;
      #red, #green, #blue {
          float: left;
          clear: left;
          width: 300px;
          margin: 10px;
      }
      #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 &gt; div.demo { padding: 10px !important; };
      &lt;/style&gt;
      &lt;script&gt;
  
      function redSwitch() {
  
          var canvas = document.createElement('canvas');
          var ctx = canvas.getctx('2d');
  
          var photo = new Image();
          photo.src = $('#pic').attr('src');
  
          canvas.width = photo.width;
          canvas.height = photo.height; 
  
          ctx.drawImage(photo, 0, 0); 
  
          var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
          var val = $('#red').slider("value");
  
          for(var y=0; y&lt;imgPixels.height; y++)
          {
              for(var x=0; x&lt;imgPixels.width; x++)
              {
                  var i = (y * 4) * imgPixels.width + x * 4;
                  if(imgPixels.data[i]+val &gt; 255)
                  {
                      imgPixels.data[i] = 255;
                  }
                  else
                  {
                      imgPixels.data[i] = imgPixels.data[i]+val;
                  }
              }
          }
  
      }
  
      $(function() {
          $( "#red").slider({
              orientation: "horizontal",
              range: "max",
              min:-255,
              max: 255,
              value: 0,
              slide: redSwitch,
              change: redSwitch
          });
  
          $( "#green").slider({
              orientation: "horizontal",
              range: "max",
              min:-255,
              max: 255,
              value: 0,
  
          });
  
          $( "#blue").slider({
              orientation: "horizontal",
              range: "max",
              min:-255,
              max: 255,
              value: 0,
  
          });
      });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;img id="pic" src="../../images/pictures/adam/pic01.jpg" /&gt;
  
  &lt;div id="red"&gt;&lt;/div&gt;
  &lt;div id="green"&gt;&lt;/div&gt;
  &lt;div id="blue"&gt;&lt;/div&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So far it should only change the red values. Once I get that working the others will be easy to finish. </p>
  
  <p>I found this site that manages to do it, at least from my understanding. The only issue is that the guy uses PHP to handle a lot of the image manipulation instead of Javascript/jQuery. <a href="http://tympanus.net/codrops/2009/09/06/dynamically-changing-style-with-jquery/" rel="nofollow">http://tympanus.net/codrops/2009/09/06/dynamically-changing-style-with-jquery/</a></p>
  
  <p>Thanks for any help!</p>