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

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?

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.

Yes it is that widget

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).

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.

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.

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!

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.

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