Fancy Range Slider widget: Change font size using custom CSS codes

Como ampliar esta escala? de 0 a 100? Os números estão muito pequenos?

Hi Dondeo,

Thanks for reaching out to Jotform Support. Unfortunately, our Portuguese Support agents are busy helping other Jotform users at the moment. I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in Portuguese, let us know and we can have them do that. But, keep in mind that you'd have to wait until they're available again.

Now, coming back to your question, I checked your form and I see that it is already set as 0 to 100 range. See my screenshot below:

If that's not the answer you're looking for, can you explain a bit more on what you want to achieve?

After we hear back from you, we’ll have a better idea of what’s going on and how to help.

hi

I need to increasy of size of font, that is very small.

Hello Dondeo,

Thanks for getting back to us. Unfortunately, it is not possible to increase the font size of the Fancy Range Slider widget in card form. If you really want to increase the font, you have to switch to the classic form and inject custom CSS codes. Let me show you how to do it in classic form with the cloned version of your form:

1. In form builder, click on the blue roller paint icon.

2. Then click on Layout

3. And select the classic form.

Now let's inject the custom CSS codes into the Fancy Range Slider widget.

span.irs-grid-text.js-grid-text-0 {

    font-size: 13px;

}

span.irs-grid-text.js-grid-text-1 {

    font-size: 13px;

}

span.irs-grid-text.js-grid-text-2 {

    font-size: 13px;

}

span.irs-grid-text.js-grid-text-3 {

    font-size: 13px;

}

span.irs-grid-text.js-grid-text-4 {

    font-size: 13px;

}

span.irs-grid-text.js-grid-text-5 {

    font-size: 13px;

}

4 . Click on Fancy Range Slider widget and click on wand icon.

5. And click on custom CSS then paste the code I provided above. 

You might want to check out our guide on How to Inject Custom CSS Codes.

Give it a try and reach out again if you have any other questions.