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

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

    Asked by Benflips 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
  • Profile Image
    JotForm Support

    Answered by Mike_G 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 will try to check the necessary codes that would change to colors of the Slider with Calculated Result widget and will get back to you on this thread as soon as possible.

     

    Thank you.

  • Profile Image
    JotForm Support

    Answered by Mike_G on July 08, 2016 at 11:44 AM

    Here are the codes to change the color of each part of the slider in the widget. (Please use the image above as reference) Please note that the image above shows an inactive slider.

    1.)

    .wrapper{

    border-color: orange !important;

    }

    2.)

    .wrapper{

    background-color: red !important;

    }

    3.)

    .slider{

    border-color: black !important;

    }

    4.)

    a.ui-slider-handle.ui-state-default.ui-corner-all{

    border-color: yellowgreen !important;

    }

    5.)

    a.ui-slider-handle.ui-state-default.ui-corner-all{

    background-color: green !important;

    }

    6.)

    .slider.ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content.ui-corner-all{

    background-color: yellow !important;

    }

    7.)

    .styleL{

    background: pink !important;

    }

     

    You can also change the color of the slider button on hover and on active.

    a.ui-slider-handle.ui-state-default.ui-corner-all.ui-state-hover{

    background-color: blue !important;

    }

    a.ui-slider-handle.ui-state-default.ui-corner-all.ui-state-hover{

    border-color: indigo !important;

    }

    a.ui-slider-handle.ui-state-default.ui-corner-all.ui-state-hover.ui-state-focus.ui-state-active{

    background-color: violet !important;

    }

    a.ui-slider-handle.ui-state-default.ui-corner-all.ui-state-hover.ui-state-focus.ui-state-active{

    border-color: cyan !important;

    }

    Here's is a test form where I have applied the CSS codes above.

    https://form.jotform.com/61894294748978

    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.

  • Profile Image

    Answered by Benflips on July 09, 2016 at 07:46 PM
    Thank you for all of this hard work...I've decided not to use this widget
    anymore.
    Are there equivalent codes for the numeric slider widget?
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian 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.

  • Profile Image

    Answered by Benflips 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 provided
    above to change colours of different elements of the numeric slider
    specifically
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image
    JotForm Support

    Answered by EltonCris 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.

  • Profile Image

    Answered by Benflips on July 11, 2016 at 02:46 AM
    I have just applied your suggestion - and I can easily find hex for colours
    I more specifically want, but when the slider is at the absolute 0 position
    and up until 10 on the scale, the right (pinkish) colour does not extend
    fully to the end of the 100 point of the slider - it's like it's missing
    some length or something.
    Also there is a faint edge of the background green visible on the top edge
    of my slider (eg. very thin edge above the pink colour, along the whole
    length)
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian 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;

    }

     

  • Profile Image

    Answered by Benflips 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*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian 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.

    .bfh-slider-value:before {

        width: 900px !important;

         height: 21px;

         top: -1.5px;

    }

    Please let us know how it goes.
    Regards.