How to change the colors of the slider with calculated result widget?

What is JotForm?

JotForm is a freeonline form builder which helps you create online forms without writing a single line of code.

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.

Why do you not want to answer this thread?(Your answer will be sent to Jeanette and Aytekin)

Benflips

Asked on July 07, 2016 at 10:43 PM

Also is there custom CSS I can use to alter the colours. The pre-defined ones are all pretty ugly. Ideally I'd like to have red at one end, merging to green at the other end if that is possible

JotForm Support

Mike_G

Answered on July 08, 2016 at 06:23 AM

Can you let us know which specific part of the widget would you like the color to be changed, please?

I have placed the CSS codes above on the Custom CSS tab of the widget.

I hope this helps. Let us know if you need any further assistance. Thank you.

Benflips

Answered on July 09, 2016 at 07:46 PM

Thank you for all of this hard work...I've decided not to use this widgetanymore.Are there equivalent codes for the numeric slider widget?*Regards,**Dr. Ben Phillips*ChiropractorB.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)...

JotForm Support

Chriistian

Answered on July 09, 2016 at 11:18 PM

Hi,

On behalf of my colleague, you are welcome.

You can try the following sliders and see which one suits your need.

Do let us know if you need further assistance.

Benflips

Answered on July 10, 2016 at 01:46 AM

Yes...I know...thank you...My question was whether or not there are codes like your colleague providedabove to change colours of different elements of the numeric sliderspecifically*Regards,**Dr. Ben Phillips*ChiropractorB.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)...

JotForm Support

EltonCris

Answered on July 10, 2016 at 03:51 AM

With the numeric slider widget, it is a bit complex since bars from left and right don't have specific elements but there are workarounds.

You can try these CSS codes. Inject this on the numeric slider widget under its CSS tab.

.bfh-slider-value:before {

background: #ef8484;

content: "";

width: 600px;

height: 20px;

z-index: 1;

position: absolute;

left: 47px;

top: -1px;

border-top-right-radius: 4px;

}

.bfh-slider {

background-color: #378255;

border-radius: 0;

}

.bfh-slider-value {

border-radius: 0 !important;

}

Expected result:

If you need further help, let us know.

Benflips

Answered on July 11, 2016 at 02:46 AM

I have just applied your suggestion - and I can easily find hex for coloursI more specifically want, but when the slider is at the absolute 0 positionand up until 10 on the scale, the right (pinkish) colour does not extendfully to the end of the 100 point of the slider - it's like it's missingsome length or something.Also there is a faint edge of the background green visible on the top edgeof my slider (eg. very thin edge above the pink colour, along the wholelength)*Regards,**Dr. Ben Phillips*ChiropractorB.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)...

JotForm Support

Chriistian

Answered on July 11, 2016 at 04:44 AM

Please add the css below to your widget's css to resolve the issue with the scale at absolute 0.

.bfh-slider-value:before {

width: 900px !important;

height: 21px;

}

.bfh-slider>.bfh-slider-handle>.bfh-slider-value {

height: 21px;

}

Benflips

Answered on July 11, 2016 at 11:45 PM

That's great.I'm not sure if it's just my browser, but I still see a very thin'top-edge' (couple of pixels at most) of green along the whole widget.Can you see this on mine?If so, can you provide a fix?Thanks, Ben*Regards,**Dr. Ben Phillips*ChiropractorB.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)...

JotForm Support

Chriistian

Answered on July 12, 2016 at 12:18 AM

I checked your form on my end but I cannot seem to see the green color on the top edge of the widget.

If the issue persists, perhaps you can try adding the yellow highlighted css below into the .bfh-slider-value:before section.