How do I code a progress bar for a slideshow custom form?

Ask the community
,
1

Hi,

I have created a custom form using a slideshow for an online quote. I am trying to add a progress bar so the customer can see how many steps have been completed

I have added a progress bar to slides 1 and 2 to test and added the below code, but the bar is empty when I click preview. It doesn’t seem to be working but no errors are popping up.

Here is the code:
(I am a complete beginner with code so any simple help is much appreciated)

export function progressBar1() {

$w(‘#progressBar1’).targetValue = 150;

$w(“#progressBar1”).value = 10;

$w(“#progressBar2”).value = 20;
}

2

@meges If I’m understanding what you’re trying to do, you will want to put code in the slideshow onChange event, and set up the targetValue and the initial value in the page’s onReady.

$w.onReady(function () {
    let TotalSlides = $w("#slideshow1").slides.length;
    $w("#progressBar1").targetValue = TotalSlides;
    $w("#progressBar1").value = 1;
});

export function slideshow1_change(event) {
    // currentIndex property is 0-based, need to add 1.
    $w("#progressBar1").value = event.target.currentIndex + 1;
}
3

Thanks! That worked!

However, how do I get the progress bars on the remaining slides to work?

They are named

#progressBar2
#progressBar3
#progressBar4

and so on.

4

I was thinking that you were using one slideshow composed of several images, and that you would need only one progress bar. It is a bit unusual to try to utilize multiple progress bars on a page, but if you want to do it, apply similar logic to the other progress bars.