Custom CSS for Fancy range slider is not working

  • Profile Image
    RockettKid
    Asked on October 21, 2017 at 10:35 AM

    Hi 

    I have added Fancy range slider in my form:

    https://form.jotform.com/72932363938163

    Problem is that no matter what I do, the custom CSS that I inject isn't working.

    This is my code:

    .irs-from{

    background: #fcca36;

    border-radius: 4px;

    }

    .irs-line-mid{

    background: #000000;

    border-radius: 6px;

    }

    .irs-slider{

    background: #e8dcb9;

    border-radius: 100%;

    }

    A colleague from Nepal tried it at her account and it is working there. Why is it not working on my account?

  • Profile Image
    Jim_R
    Answered on October 21, 2017 at 03:23 PM

    I'm guessing you already figured this out. I can see you managed to customize the slider. However, it's misaligned, along with the Button Radios widget.

    If this is what you're trying to fix, I suggest you remove the following codes from the Form Builder (not the widgets):

    #customFieldFrame_10 {

        width : 450px !important;

        margin-left : -120px;

    }

    #customFieldFrame_14

    {

        margin-left: -120px;

    }

    And replace them with these:

    iframe {

      width: 100% !important;

    }

    Result:

    In case we're mistaken, please get back to us with a more detailed description of what you're trying to change on the slider widget.

  • Profile Image
    RockettKid
    Answered on October 22, 2017 at 12:34 PM

    1508689980Untitled-1.png

    Well I figured that too but it is not showing from and to ranges properly. I have tried everything, what is the way out for this?

  • Profile Image
    Kevin_G
    Answered on October 22, 2017 at 12:59 PM

    Please inject the following CSS code to your widget in order to display the selected quantity properly: 

    .range-container {

        padding-left: 43px !important;

        padding-right: 42px !important;

    }

    Here is a cloned form of yours where the result can be seen: https://form.jotform.com/72945228854972 

    I hope this helps.