If container is hidden on .rangeslider() call on ie9, slider can not be grabbed

[mcelligottnick]

When using something like this on IE9;

#zoomer {
    display: none;
    position: absolute;
}
#zoomer.show {
    display: block;
    position: static;
}

<div id='zoomer'>
    <input type='range' min='1' max='3' step='0.05' value='1'>
</div>

<!--[if lte IE 9 ]>
<script src="js/rangeslider.min.js"></script>
<script>
    jQuery(document).ready(function($){
        $('#zoomer input').rangeslider({polyfill: false});
    )};
</script>
<![endif]-->

And then later some JS adding show class to #zoomer, the #zoomer becomes visable, the input is hidden and the correct rangeslider elements are created, however rangeslider__handle is not able to be moved.

To fix this make the element shown, call rangeslider() on it, and then hide it with some JS on load

.ie9 #zoomer {
    display: block;
    position: static;
}

<!--[if lte IE 9 ]>
    <script src="js/rangeslider.min.js"></script>
    <script>
        jQuery(document).ready(function($){
            $('#zoomer input').rangeslider({polyfill: false});
            if($('html').hasClass('ie9')) {
                $('#zoomer').css({
                    'display': 'none',
                    'position': 'absolute'
                });
            }
        });
    </script>
<![endif]-->

[andreruffert]

Discussion moved to #88