search

andreruffert / rangeslider.js

🎚 HTML5 input range slider element jQuery polyfill
https://rangeslider.js.org
MIT License
2.16k stars 401 forks source link

Init Issue #151

Closed rcosgrave closed 9 years ago

rcosgrave commented 9 years ago

I am having trouble getting the range slider to init. It could be a very silly issue on my end but I cant find it. Any help would be appreciated (if it is a silly issue, also feel free to shame me).

The DOM or HTML structure does not change after the .rangefinder() function fires.

Here is my very basic code that does not work, everything loads correctly (no console errors reported via Firebug)

I tested using the latest builds of Firefox and Chrome on a Mac.

<link href="http://mysite.local/assets/vendor/rangeslider/rangeslider.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- Using your URL to see if it was my instance of rangeslider -->
<script src='http://andreruffert.github.io/rangeslider.js/assets/rangeslider.js/dist/rangeslider.min.js'></script>
</head>
<body>
<input type="range" min="10" max="1000" step="10" value="300">

<script>
    $('input[type="range"]').rangeslider();
</script>
<!-- Trying on pageload too; I tried one or the another or both to no avail -->
<script>
$(function() {
    $('input[type="range"]').rangeslider();
});
</script>
andreruffert commented 9 years ago

@rcosgrave #150 should help you get it up and running 😉

andreruffert commented 9 years ago

I tested using the latest builds of Firefox and Chrome on a Mac.

The browsers support the native <input type="range"> element... If you wanna use the rangeslider.js polyfill as well for browsers with native <input type="range"> support you have to pass the option polyfill: false e.g.

$('input[type="range"]').rangeslider({
  polyfill: false
});
rcosgrave commented 9 years ago

Thanks for your quick response and great plugin! Setting polyfill to false was the trick :+1:

Thank you sir!

andreruffert commented 9 years ago

@rcosgrave you're welcome!