Can please anyone help on adding some custom code to make the slider work?
The slider doesn’t work on mobile since it’s loaded with display:none property - it’s later displayed with display:block with interactions. However with this setup, will not let the slider to work.
Now I’ve received some suggestion from great Webflow support that this requires some custom code to redraw the slider. But I guess I’m not that fluent with Javascript.
[ I have a pricing table biult with sliders. Two pricing tables for two locations. At the bottom there’s a dropdown toggle to switch the location. So one of the sliders is hidden when page loads - the display is set to none. Loaded this way, it not working even when You switch to see it with display:none
Is there a valid reason why you can’t have the slider displayed by default, and use the display:none property as an initial state in your interaction?
HTML needs to know about the dimensions of an element PRIOR to be able to take it into account for the dimensions of a parent. I haven’t checked your site yet but if your IX relies on changing the dimensions of the parent of the slider to an “Auto” value, that can’t work if the slider is display:none when the page loads.
If the reason why the initial state isnt used here if because the element will “flash” at load, then use another interaction to delay the apparition of the element of 100ms using Opacity.
Yes, i got to have the slider loaded with display:none , to be precise, this is how Geotargetly works, an app to control the content based on gealocalization. It provides Javascript to the website and requires the content it works with to be display:none than depend on geolocalization it changes one of the divs to display:block
The only interactions/javascript things going on here are changes in display property, no scaling, size interactions.
@cyberdave once again thanks for Your great support at thi one. There is only one section with sliders. I’ll attach image. It’s pricing table for two cities. Geotargetly controls to display only one depending on localization. You choose a car size snd a service plan with the sliders. Below the pricing there is a dropdown toggle to switch the city - change the display property of elements.
If I got You right earlier today, it looks like I’d need to control the toogle switching between two cities with custom Javascript and not Webflow interactions, cause a REWRITE function will be needed.
There are two pricing tables, for different localization. Each table contains two sliders - one to change cars, one to change plans.
For every pricing table there is a parent div. Geotargetly requires them both to be display:none in css, and then it chooses which one to change to block with javascript, depending on localization. The divs classes are:
Below the sliders there is a dropdown, as a fallback, to change the visibility manually. In the dropdown there’s a trigger for interaction. You can see it here:
As the trigger is clicked, it fires the interaction which hides one div and shows another. The interactions are called show_warsaw_pricing and show_wroclaw_pricing - depending which one to show. You can see it below:
I didn’t find where your slider and IX were.
