search

andreruffert / rangeslider.js

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

Does not work with loadcss #174

Closed jenstornell closed 8 years ago

jenstornell commented 8 years ago

The rangeslider did not work when using loadcss. It's probably how JS and CSS are loading that make some trouble.

https://github.com/filamentgroup/loadCSS/issues/96

andreruffert commented 8 years ago

What do you mean "...did not work when using loadcss..." :) What exactly did not work? Some details about your code?

When rangeslider.js is initialising the .rangeslider__handle width CSS property must be set e.g. .rangeslider__handle { width: 42px; } It's needed for calculation. That's the only CSS needed to make rangeslider.js initialising correctly. All the other CSS can be defined afterwards.

:v:

jenstornell commented 8 years ago

It's probably just that line of code that makes it does not work.

loadCSS loads all CSS async which means the JS is loaded first and it does not know the width just yet. I tried to reset rangeslider after but I did not get that to work.

andreruffert commented 8 years ago

Yes like I said if you initialize rangeslider.js

$('input[type="range"]').rangeslider({...});

The plugin needs the CSS width for the .rangeslider__handle for calculation. It stores the width in each instance.

Possible solutions:

I tried to reset rangeslider after but I did not get that to work.

After the CSS is loaded you could just call the update method e.g. $('input[type="range"]').rangeslider('update');