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

  • Profile Image
    fadefml
    Asked 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?

  • Profile Image
    Ben
    Answered 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
    fadefml
    Answered on June 17, 2016 at 03:28 PM

    Yes it is that widget

  • Profile Image
    Ben
    Answered 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
    fadefml
    Answered 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
    Ben
    Answered 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
    fadefml
    Answered 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
    Ben
    Answered 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
    jaydenbrant
    Answered on September 29, 2016 at 07:26 PM

    How do you change the font color on this widget?
  • Profile Image
    beril
    Answered 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