user7873949 user7873949 -4 years ago 89
jQuery Question

jquery mobile crashes the code

What I am trying to do is just like the code: when the value is greater than 10, display >10, or display 1 - 10. It works fine. However, if I uncomment the jquery mobile , it does not work anymore.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!--<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>-->

</head>
<body>
<form>
<label for='range'>as</label>
<input id='range' type='range' onmousemove='test()'>
<p id='display'>display</p>
</form>
<script>
function test(){
var v = $('#range').val();
if(v <= 10)$("#display").text('1-10');
else $("#display").text('>10');
}
</script>
</body>
</html>

Answer Source

So after digging much and going through their documentation, there isn't any specific method to capture the change event of slider. The only suggested solution through out the internet was to wrap input within a div and attach change event to that particular div, through which you can get the value of slider. Working Snippet below.

$("#slider").change(function() {
  var v = $('#range').val();
  if (v <= 10) $("#display").text('1-10');
  else $("#display").text('>10');
});
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<form>
  <div id="slider">
    <label for='range'>as</label>

    <input id='range' type='range' min="0" max="100" value="0">
  </div>
  <p id='display'>display</p>
</form>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download