Sliders With Calculated Results Images and other help

  • Profile Image
    nhamwey
    Asked on September 06, 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

  • Profile Image
    Chriistian
    Answered on September 06, 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.

  • Profile Image
    nhamwey
    Answered on September 06, 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");

  • Profile Image
    Chriistian
    Answered on September 06, 2017 at 01: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.

  • Profile Image
    nhamwey
    Answered on September 06, 2017 at 01:27 PM

    Looks good. Thank you.

     

    Is there a way to edit each slider individually?

  • Profile Image
    Chriistian
    Answered on September 06, 2017 at 02: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.

  • Profile Image
    nhamwey
    Answered on September 06, 2017 at 05:05 PM

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

  • Profile Image
    nhamwey
    Answered on September 06, 2017 at 05: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.

  • Profile Image
    EltonCris
    Answered on September 06, 2017 at 06: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!

  • Profile Image
    nhamwey
    Answered on September 06, 2017 at 07:30 PM

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

    Im now trying to line up may PayPal products horizontally, instead of vertically.
  • Profile Image
    Jan
    Answered on September 06, 2017 at 09: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.