Customizer widget Fancy range slider

J'aimerais changer la couleur de mon slider dans le widget "Fancy range slider"

J'ai trouvé le thread : Styling fancy range slidr widget (jotform.com)

Mais je ne parviens pas à customizer l'image utilisée, ci-jointe. J'aimerais l'a voir en bleu (#293E84)

Merci d'avance

Hi mauranerollet, 

Thanks for reaching out to Jotform Support. I'd like to let you know that I am using a translation tool to provide assistance, but if you would prefer to get assistance in French the language, we can forward your ticket to our French team. However, please note that it could take longer to receive a response.

With that being said, let me assist you with your inquiry. You can change the color of your Fancy Range Slider Widget by injecting the CSS code in your widget below:

/* Change the color - TicketID#5413076 */

irs-line-mid, .irs-line-left, .irs-line-right, .irs-bar, .irs-bar-edge, .irs-slider {

background: url(http://shots.jotform.com/kevin/SupportImages/uploads/6f5b2292_sprite-skin-flat.png) repeat-x !important;

}

.irs-bar {

background-position: 0 -60px !important;

}

.irs-slider {

background-position: 0 -120px !important;

}

.irs-bar-edge {

background-position: 0 -90px !important;

}

.irs-single {

background: #1cd165 !important;

}

.irs-single:after {

border-top-color: #293E84 !important;

}

/* Ends here */ 

Please note that you may need to remove the entire injected CSS code in your widget and replace it with this CSS code.

To inject the CSS Code in your widget, check out the steps and screencast below:

1. Open your form in Form Builder, click the wand icon of your Fancy Range Slider Widget to open the Widget Settings panel.
2. Go to the Custom CSS tab.
3. Paste the CSS Code into the textarea.
4. Click the Update Widget button to save the changes.

Give it a try and let us know how it goes.

Thanks, but it is not working at all.

It is in green and red and I want to harmonize the line color (using #293E84)

Also, I would like to remove the scale behind (0 - - - - 3 - - - - 5 - - - - 8 - - - - 10) and the grey bold line between 5 - - - - 8 - - -

Hi mauranerollet,

Thanks for reaching out to us for help. If you would like to change the color of the line to #293E84 on the Fancy Range Slider widget, we simply need to make a slight modification to the code that my colleague previously provided. Let me show you how:

• In Form Builder, click on the Wand icon of the Fancy Range Slider widget.
• On the menu that opens on the right, go to the Custom CSS tab.
• Remove the previously given code and copy and paste the code below:

irs-line-mid, .irs-line-left, .irs-line-right, .irs-bar, .irs-bar-edge, .irs-slider {

background: url(https://www.jotform.com/uploads/Alexander_G/232212871994057/5674776962213587551/sprite-skin-flat.png) repeat-x !important;

}

.irs-bar {

background-position: 0 -60px !important;

}

.irs-slider {

background-position: 0 -120px !important;

}

.irs-bar-edge {

background-position: 0 -90px !important;

}

.irs-from, .irs-to, .irs-single {

    background: #293E84 !important;

}

.irs-from:after, .irs-to:after, .irs-single:after {

      border-top-color: #293E84 !important;

}

• Click on the Update Widget button.

Now, let's remove the scale numbers by injecting a CSS code:

• In Form Builder, click on the Wand icon of the Fancy Range Slider widget.
• On the menu that opens on the right, go to the Custom CSS tab.
• Copy and paste the code below:

.irs-grid-text {

display: none;

}

• Click on the Update Widget button.

Reach out again if you have any other questions.

Many thanks, the color is perfect.

About removing stuff, I was talking about the whole scale, meaning also the small lines (circled in red).

And when I was talking about the grey bold line between 5 - - - - 8 - - -, I also surrounded it in red.

Last question, is there any option to add legend text for 0 as for 10, e.g. see picture below

Many thanks in advance

Hi mauranerollet,

Thanks for the clarification. Please insert the CSS code below.

/*Code to remove the scale lines */

span.irs-grid {

    display: none !important;

}

Unfortunately, it is not possible to remove the grey bold line and insert the text legends.

Let us know if you need any other help.