title: jQueryMobile: how to work with slider events?
body: <p>I'm testing the <a href="http://jquerymobile.com/demos/1.0a2/#docs/forms/forms-slider.html" rel="noreferrer">slider</a> events in <a href="http://jquerymobile.com/" rel="noreferrer">jQueryMobile</a> and I must been missing something.</p>
  
  <p>page code is:</p>
  
  <pre><code>&lt;div data-role="fieldcontain"&gt;
      &lt;label for="slider"&gt;Input slider:&lt;/label&gt;
      &lt;input type="range" name="slider" id="slider" value="0" min="0" max="100"  /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and if I do:</p>
  
  <pre><code>$("#slider").data("events");
  </code></pre>
  
  <p>I get</p>
  
  <pre><code>blur, focus, keyup, remove
  </code></pre>
  
  <p>What I want to do is to <strong>get the value once user release the slider handle</strong></p>
  
  <p>and having a hook to the keyup event as</p>
  
  <pre><code>$("#slider").bind("keyup", function() { alert('here'); } );
  </code></pre>
  
  <p>does absolutely nothing :(</p>
  
  <p>I must say that I <strong>wrongly assumed</strong> that jQueryMobile used <a href="http://jqueryui.com/demos/slider/" rel="noreferrer">jQueryUI</a> controls as it was my first thought, but now working deep in the events I can see this is not the case, only in terms of CSS Design.</p>
  
  <blockquote>
    <p><strong>What can I do?</strong></p>
  </blockquote>
  
  <p>jQuery Mobile Slider <a href="https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.forms.slider.js" rel="noreferrer">source code</a> can be found on <a href="https://github.com" rel="noreferrer">Git</a> if it helps anyone as well a <strong>test page</strong> can be found at <a href="http://jsbin.com/idobu3/edit" rel="noreferrer">JSBin</a></p>
  
  <hr>
  
  <p>As I understand, the <code>#slider</code> is the textbox with the value, so I would need to hook into the slider handle as the generated code for this slider is:</p>
  
  <pre><code>&lt;div data-role="fieldcontain" class="ui-field-contain ui-body ui-br"&gt;
      &lt;label for="slider" class="ui-input-text ui-slider" id="slider-label"&gt;Input slider:&lt;/label&gt;
      &lt;input data-type="range" max="100" min="0" value="0" id="slider" name="slider" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c ui-slider-input" /&gt;
      &lt;div role="application" class="ui-slider  ui-btn-down-c ui-btn-corner-all"&gt;
          &lt;a class="ui-slider-handle ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" href="#" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="54" aria-valuetext="54" title="54" aria-labelledby="slider-label" style="left: 54%;"&gt;
              &lt;span class="ui-btn-inner ui-btn-corner-all"&gt;
                  &lt;span class="ui-btn-text"&gt;&lt;/span&gt;
              &lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and checking the events in the handler anchor I get only the <code>click</code> event</p>
  
  <pre><code>$("#slider").next().find("a").data("events");
  </code></pre>
  
  <hr>
  
  <p><strong>Fix</strong></p>
  
  <p>From Ivan answer, we just need:</p>
  
  <pre><code>&lt;div data-role="fieldcontain"&gt;
      &lt;label for="slider"&gt;Input slider:&lt;/label&gt;
      &lt;input type="range" name="slider" id="slider" value="0" min="0" max="100"  /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and then</p>
  
  <pre><code>$(document).bind("pagecreate", function(event, ui) {
  
      $('#slider').siblings('.ui-slider').bind('tap', function(event, ui){ makeAjaxChange($(this).siblings('input')); });
      $('#slider').siblings('.ui-slider a').bind('taphold', function(event, ui){ makeAjaxChange($(this).parent().siblings('input')); 
  
  });
  
  function makeAjaxChange( elem ) { 
      alert(elem.val()); 
  }
  </code></pre>
  
  <p><strong>Thank you</strong> Ivan for the heads up.</p>