-
fadefmlAsked on June 17, 2016 at 2: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?
-
BenReplied on June 17, 2016 at 3: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.
-
fadefmlReplied on June 17, 2016 at 3:28 PM
Yes it is that widget
-
BenReplied on June 17, 2016 at 3: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).
-
fadefmlReplied on June 17, 2016 at 4: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.
-
BenReplied on June 17, 2016 at 4: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.
-
fadefmlReplied on June 17, 2016 at 4: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!
-
BenReplied on June 17, 2016 at 5: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.
-
jaydenbrantReplied on September 29, 2016 at 7:26 PM
-
beril JotForm UI DeveloperReplied on September 30, 2016 at 3: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