Jquery slider not inheriting intended properties

HTML & CSS
1

Heya everyone!

I am hoping to implement this jquery slider in my page. I’ve read the demo page and included what I thought was necessary for it to work, namely the rangeslider.css and rangeslider.min.js file but mine didn’t inherit any of the properties of the demo slider. I added ‘class=rangeslider’ to it and it seems to have inherited some, but not all of the properties. What I mean by that is it changed to having rounded edges and a round instead of square slider, but the slider doesn’t look the same and there’s no color to the range, like in the demo(I changed it from green to orange in the css).

Could someone point me toward what I did wrong? Here’s my test page: http://schw.im/slider.html

Thanks for your time!

2

I think you need to initialise it.

e.g.

<script>
    $(function() {
        // Initialize the elements
        $('[data-rangeslider]').rangeslider({
            polyfill: false
        });
    });
</script>
1 Like
3

That was indeed the issue. I’m sorry for missing such an obvious step :flushed:

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.