Slider not getting styled properly

[Branden]

I have a page with dynamically generated sliders. The sliders appear, but they're not styled properly.

The problem, I believe, is that the elements are being added to the DOM after the page load.. so the new elements aren't being styled.

I tried a $('.slider').slider("refresh"), but I get this error:

Uncaught Error: cannot call methods on slider prior to initialization; attempted to call method 'refresh'

So I tried $('slider').slider() which is a step in the right direction, but still wrong. When I do that, it displays both the non-styled slider AND the styled slider. Not good.

Any idea how I can get the slider to style correctly on page load from within the Appery.io tool?

Also, perhaps this a separate issue, when the sliders DO appear, it's just the slider. The value of the slider does not display. Is this a related issue or a separate issue?

Thank you very much!

[Igor]

Hello,

Could you attach screenshot with not styled slider?

[Branden]

Of course. Screenshot is attached!

[Igor]

Please try to use next code:

pre
Appery("mobileslider_2").slider( "disable" );
//or
Appery("mobileslider_2").slider( "refresh" );
/pre

[Branden]

I tried your suggestion but it didn't appear to have any effect. No change...

I added the code to the Load event of the page, the same place where the sliders are generated.

[Igor]

Try to use this code on button click event:
pre
Appery("mobileslider_2").slider( "disable" );
/pre

Where 'mobileslider_2' is a slider component name.

[Branden]

I don't understand... the sliders are supposed to look correct at page load, not after a click event. Are you suggesting I create a button just to get the sliders to look right?
Thanks!

[Igor]

As I understand your correctly the problem was when you tried to use next code:
pre $('.slider').slider("refresh")/pre you got the error. I proposed to you to use code from my previous post with simple button click event.

[Branden]

Okay, I don't think we're understanding each other here.

I need the sliders to be properly styled on page load. Not after a click event.

My code:

Code: Select all

 $('.slider').slider("refresh") 

That was an attempt to fix the slider styling problem, but it didn't work due to the error I received.

I don't understand why I would create a button click event; it should be automatic.

Thanks!

[Branden]

I was able to figure it out!

I added ".trigger('create')" to the end of my .append call. Works great now!

Thank you for your time/patience.