Range Slider JS not working for dynamic content

[punter82]

Hey Everyone,

I am using the basic range slider and i have written like how it is mentioned in the docs. It works fine on a page which is rendered. Basically when i view source i see the content.

But for scenarios like modal, or angular ng-view where the content is dynamically added, the range slider is not initialized and i see the default html5 slider. No errors nothing. Infact i tried initiating after opening the modal and i see the object but the slider is not changed.

Basically all the html elements needed for range slider is not appended. Any help is highly appreciated

[andreruffert]

K first of all keep calm man ✌️

Of course u have to trigger a initialization for dynamically added content.
Rangeslider.js doesn't watch for DOM changes.

So you need to watch for DOM changes and trigger the rangeslider.js initialization.
It doesn't have really something to do with rangeslider.js itself...

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

[andreruffert]

K I think you did something wrong.
It's kinda hard to tell you a possible approach without seeing any specific code or knowing exactly what you'r trying to achieve...

Good luck anyway! ✌️

[punter82]

I made it work.. All good

[agseco]

@punter82 I'm having a similar issue to yours, any chance that you share how you solved your issue?

[punter82]

Sure. Ours is an angular JS app. So my scenario was, we have ngDialog modal where people can slide and rate, but the ngDialog was not there initially in the DOM. So i wrote a callback to detect if ngDialog was successfully opened and then the function does something like this

var $r = jQuery('input[type="range"]');
            // Initialize
            $r.rangeslider({
                polyfill: false,
                onInit: function() {
                   // Do some logic on the plugin init
                },
                onSlideEnd: function(position, value) {
                    // Update the rating value once the slide is done

                }
            });

Worked like Charm.