title: How to create a HTML5 slider on mobile only, otherwise jQuery UI
body: <pre><code>&lt;link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"&gt;&lt;/link&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
  
  
  &lt;script&gt;
  $(function() {
      $("#slider").slider({
          slide: function(event, ui) {
              if (ui.value &lt; 33) {
                  $("#1").fadeIn("slow");
                  $("#2").fadeOut("slow");
                  $("#3").fadeOut("slow");
              }
              else if (ui.value &lt; 66) {
                  $("#1").fadeOut("slow");
                  $("#2").fadeIn("slow");
                  $("#3").fadeOut("slow");
              }
              else {
                  $("#1").fadeOut("slow");
                  $("#2").fadeOut("slow");
                  $("#3").fadeIn("slow");
              }
          }
      });
  });
  &lt;/script&gt;
  
  &lt;div id="slider"&gt;&lt;/div&gt;
  
  &lt;div id="content" &gt;
      &lt;div id="1" style="position:absolute;z-index:0;"&gt;A&lt;/div&gt;
      &lt;div id="2" style="position:absolute;z-index:1;display:none;"&gt;B&lt;/div&gt;
      &lt;div id="3" style="position:absolute;z-index:2;display:none;"&gt;C&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The code above uses jQuery UI to create a slider. The slider fades between content in 3 different div's. The code is great on a computer, but the slider it creates does not slide on a mobile phone. What DOES work fine on mobile is as follows:</p>
  
  <pre><code>&lt;link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"&gt;&lt;/link&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      function changecontent()
          {
          if (document.getElementById("slider").value&lt;33){
              $("#1").fadeIn("slow");
              $("#2").fadeOut("slow");
              $("#3").fadeOut("slow");
          } else if (document.getElementById("slider").value&lt;66){
              $("#1").fadeOut("slow");
              $("#2").fadeIn("slow");
              $("#3").fadeOut("slow");
          } else if (document.getElementById("slider").value&gt;66){
              $("#1").fadeOut("slow");
              $("#2").fadeOut("slow");
              $("#3").fadeIn("slow");
          }
      };
  &lt;/script&gt;
  
  &lt;input type="range" name="slider" id="slider" value="0" min="0" max="100" onchange="changecontent()"/&gt;
  &lt;div id="content"&gt;
      &lt;div id="1" class="show" style="position:absolute;z-index:0;"&gt;A&lt;/div&gt;
      &lt;div id="2" class="hide" style="position:absolute;z-index:1;"&gt;B&lt;/div&gt;
      &lt;div id="3" class="hide" style="position:absolute;z-index:2;"&gt;C&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The code above 'works' on all browsers (mobile or not), but allows for no styling options and looks different on each browser. I'm fine with how it shows on mobile, but hate how it looks on IE and hate how it functions on Firefox.</p>
  
  <p>Any JS/jQuery masters skillful enough to combine these so that the website will do one or the other based on screen resolution / device it's viewed on? I'm open to other options too. But I can't use jQuery Mobile due to JS conflict with the template I'm using. jQuery UI works fine.</p>