Slider initially changed

[PietervkParticipant]

Hi,
We have a series of sliders on a page, that the user has to drag to the correct position.
I change the color of the slider button after it has been dragged by using the on-slide-event. In that function, we add a class to the slider button, so that the color changes.

Now if the user gets to an unfinished page, some of the sliders have already been set and some not. How can I change the color of the button initially to indicate which sliders have already been changed?

I know which have been changed, but not how to add the class to the div.jqx-slider-slider.
When I try the on-created event, that did not work, because jQuery was not activated yet.

[PietervkParticipant]

I found a way to do this. When the slider has already been changed I put a ‘slider-init’ class on the <fieldset> element that I have surrounding the slider.

Then on document ready, I execute this code to add the ‘slider-set’ class to the changed sliders:

 setTimeout(
        function () { // Once the page is generated, find any sliders that have already been done and mark them as done
            $('.slider-init').find('div.jqx-slider-slider').each(function() {
                $(this).addClass('slider-set');
            });
        },
       1000);

There is a timeout, to ensure that the slider script has been executed. Not sure if this is the best way, but it works.

[Author]

Posts