Customizing fancy range slider

Is it possible to have text like this in a slider?

also, can the increments of 5 where every number is shown?

https://form.jotform.com/203424430925146

Thank you!

Unfortunately, there are no such options available in the Fancy Range Slider widget. You may add a CSS pseudo text by adding the next CSS to the widget:

.irs-min, .irs-max {

visibility: visible !important;

text-align: center;

}

.irs-min::before {

content: "NONE";

display: block;

}

.irs-max::after{

content: "EXTREMELY ACTIVE";

display: block;

}

Example:

This worked perfectly. Now we are trying to fit this to a mobile screen.

Are you able to left or right justify this text so the text "not severe" and "extremely severe" are on top of each other to conserve space?

Hi graham.columbus, it looks like you have removed Not Severe and Extremely Severe from the slider.

Do you still need help to justify the text on top of each other space?

Yes please. this is the Form we are working on. https://www.jotform.com/build/203394492097059

to clarify from above looking to have the text look like this:

Not Extremely

Severe Severe

Thank you!!

Hi graham.columbus, thank you for reaching back to us.

Please refer to the following screenshot:

If the screenshot above is acceptable for you, please kindly add the following code into your widget custom CSS:

.irs-min, .irs-max {

visibility: visible !important;

text-align: center;

margin-top: -12px

}

.irs-min::after{

content: "NOT \a SEVERE";

white-space: pre;

display: block;

margin-left: 2px

}

.irs-max::after{

content: "EXTREMELY \a SEVERE";

white-space: pre;

display: block;

margin-left: 2px

}

Let us know if it doesn't work for you. 

Thanks for the help. for some reason that didnt work for me..

.irs-min, .irs-max {

visibility: visible !important;

text-align: center;

margin-top: -12px

}

.irs-min::after{

content: "NOT SEVERE";

white-space: pre;

display: block;

margin-left: 2px

}

.irs-max::after{

content: "EXTREMELY SEVERE";

white-space: pre;

display: block;

margin-left: 2px

}

Hi graham.columbus, I apologize for my unclear explanation.

Please use \a to break the text into a new line. It looks like it is missing within the content.

content: "NOT \a SEVERE";

Kindly give it a try and let us know if it still doesn't work for you.