-
nhamweyAsked on September 6, 2017 at 10:33 AM
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
Page URL: https://form.jotform.us/72064330388152 -
Chriistian Jotform SupportReplied on September 6, 2017 at 12:00 PM
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.
-
nhamweyReplied on September 6, 2017 at 12:31 PM
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");
-
Chriistian Jotform SupportReplied on September 6, 2017 at 1:18 PM
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.
-
nhamweyReplied on September 6, 2017 at 1:27 PM
Looks good. Thank you.
Is there a way to edit each slider individually?
-
Chriistian Jotform SupportReplied on September 6, 2017 at 2:47 PM
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.
-
nhamweyReplied on September 6, 2017 at 5:05 PM
Yeah, each one of those background images would be a different color on each slider
-
nhamweyReplied on September 6, 2017 at 5:14 PM
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.
-
Elton Support Team LeadReplied on September 6, 2017 at 6:53 PM
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!
-
nhamweyReplied on September 6, 2017 at 7:30 PM
-
JanReplied on September 6, 2017 at 9:19 PM
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.