Custom CSS for Fancy range slider is not working

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?

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.

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?

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.