Custom CSS for Fancy range slider is not working

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


    I have added Fancy range slider in my form:

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

    This is my code:


    background: #fcca36;

    border-radius: 4px;



    background: #000000;

    border-radius: 6px;



    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
    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;




        margin-left: -120px;


    And replace them with these:

    iframe {

      width: 100% !important;



    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
    Answered on October 22, 2017 at 12:34 PM


    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
    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: 

    I hope this helps.