What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Changing color and image of handle in Sliders with calculated result widget

    Asked by fadefml on June 17, 2016 at 02:37 PM

    Can I customize this widget? I would like the user to have the choice to type in a value of the slider as well as be able to slide it to a value. I also want to change the colors of the actual slider images. Is this possible?

    sliders widget slide
  • Profile Image

    Answered by Ben on June 17, 2016 at 03:25 PM

    I presume that you mean "Sliders with calculated result".

    If so, unfortunately no, you can not set up the value to be added manually to the same - only to move the slider over to select what you wish.

    Changing color of the rectangles that are moved would be possible, however I would only like to confirm that the issue is with the same widget first.

  • Profile Image

    Answered by fadefml on June 17, 2016 at 03:28 PM

    Yes it is that widget

  • Profile Image

    Answered by Ben on June 17, 2016 at 03:57 PM

    OK, thank you for confirmation.

    Now to change the color, you could use something like this:

    div.slider.slider.ui-slider.ui-slider-horizontal > a.ui-slider-handle {
        background-color: red;
        background-image: none;
    }

    That will remove the assigned image and set it to red color.

    You can of course set it up to any other color that you might need.

    You should add it to your widgets custom CSS section.

    changing the background-image attribute you could also add another image to it.

    For example, setting it up like so:

     

    div.slider.slider.ui-slider.ui-slider-horizontal > a.ui-slider-handle {
        background-color: transparent;
        background-image: url("https://cdn.jotfor.ms/images/logo@4x.png");
        background-position: -6px center;
        background-size: 100px auto;
    }

    Would show a JotForm logo instead of the red color (I also included CSS to position the background and resize it so you can readjust the same if your image is bigger than the handle).

  • Profile Image

    Answered by fadefml on June 17, 2016 at 04:20 PM

    I can not get this to work. I am going in "Designer" clicking custom CSS then clicking on the widget and pasting your code in with no luck. Please advise.

  • Profile Image

    Answered by Ben on June 17, 2016 at 04:37 PM

    Actually, that is adding the CSS to the custom CSS code of your form.

    Instead, you should add it to the custom CSS code of your widget.

    To do that, you should:

    1. click on the filed in the form builder (not form designer)

    2. click on wizard wand (in top right corner of the field)

    3. Click on Custom CSS tab in the wizard screen

    4. Add CSS

    5. Update widget

    Once you do, wait for the widget to finish loading the changes on your form and save the form and test it out.

    Do let us know how it goes.

  • Profile Image

    Answered by fadefml on June 17, 2016 at 04:41 PM

    Okay that worked. I figured out how to change the rest but I cant change the font color of this widget for some reason. Please help!

  • Profile Image

    Answered by Ben on June 17, 2016 at 05:11 PM

    Yes, that is for the circle / handle.

    To change other things, you would use the following CSS:

    td > div.wrapper {
        background-color: gray;
    }
    div.slider.slider.ui-slider.ui-slider-horizontal {
        background-color: white;
        background-image: none;
    }

    * Next to the previous code.

    I also made a quick screenshot that explain the classes above

    Hope this helps.

  • Profile Image

    Answered by jaydenbrant on September 29, 2016 at 07:26 PM

    How do you change the font color on this widget?
  • Profile Image
    JotForm Support

    Answered by beril on September 30, 2016 at 03:07 AM

    I've created a separate thread for you, so anyone in the support staff will be able to assist you with your specific requirement. Please follow up there:

    https://www.jotform.com/answers/946594