-
graham.columbusAsked on December 8, 2020 at 12:52 PM
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!
-
MikeReplied on December 8, 2020 at 3:41 PM
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:
-
graham.columbusReplied on December 11, 2020 at 12:39 PM
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?
-
Jessica JotForm SupportReplied on December 11, 2020 at 2:58 PM
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?
-
graham.columbusReplied on December 14, 2020 at 11:41 AM
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!!
-
Jessica JotForm SupportReplied on December 14, 2020 at 1:28 PM
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.
-
graham.columbusReplied on December 14, 2020 at 2:26 PM
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
}
-
Jessica JotForm SupportReplied on December 14, 2020 at 3:39 PM
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.