Sliders With Calculated Results Images and other help

I am using Sliders With Calculated Results widget and wanted to add in some .png images. The images appear fine when editing, but then do not show when the form is live.

If possible I would also like to know how to make the thing you drag in the slider a different image. I found the slider in the code but could not get an image to insert.

Last thing is for the total sum of each slider to be set so that the user cannot go past that total sum number.

Thanks

As per checking your form, are you referring to the slider image displayed on the widget?

You can change the theme of your slider by selecting from Topics settings of the widget.

To change the drag button of the of the slider widget, you can add the following CSS code to the widget.

.noUi-handle{

    border: 1px solid blue !important;

    background: blue !important;

}

Regarding the total sum of each slider, there is no current option in the widget that will validate or disable the field to not let the user go past that total sum number.

Thanks for the response

The code works well to change the drag button to different colors, but I want to change the drag button to an image 

Ive been trying different things like this:

background-image: url("https://i.imgur.com/WOnmF3G.png");

Please use the below CSS instead.

.noUi-handle{

    background-image: url(https://i.imgur.com/WOnmF3G.png) !important;

    background-position: -2px -2px !important;

    background-size: 20px !important;

    background-repeat: no-repeat !important;

    border: none !important;

}

Please check my cloned form https://form.jotformpro.com/72485405518965.

Looks good. Thank you.

Is there a way to edit each slider individually?

Do you mean you want different background image for each slider? Please give us the images in order and we will see if we can come up with the CSS to do that.

Yeah, each one of those background images would be a different color on each slider

Im not going to use the background images for the drag button any more and just put that image next to the text.

I would still like to know if there is a way to edit the color for each individual slider.

Now the problem is that the image appears in the builder but not when published and it erases the whole line.

The images are not showing because the domain where they are hosted doesn't support HTTPS (SSL). They only work on HTTP.

https://usf1news.com/wp-content/uploads/2017/07/PER.jpg

Since the secure form is on HTTPS, we suggest to host them into a domain with SSL e.g. Dropbox.

Changing the color of each slider is also possible with CSS. You can use the following. The number in bold represents the sliders, it starts with 0. The first color (text in blue) targets the left bar and the second color (text in green) for the right bar. Feel free to change them according to your preference. You can also style more sliders by duplicating the CSS codes.

tr[sliderid="0"] .styleL {

    background: #a4e0aa; 

}

tr[sliderid="0"] .noUi-horizontal {

    background-color: #800880;

} 

tr[sliderid="1"] .styleL {

    background: yellow;

}

tr[sliderid="1"] .noUi-horizontal {

    background-color: blue;

}

As a result:

Hope this helps!

Thanks for all of the help. Its coming along well.

Glad to hear that this issue is now resolved. I created a separate thread for your next issue. Please wait for our reply on this thread: https://www.jotform.com/answers/1241540.

Thank you.