Customizing fancy range slider

  • Profile Image
    graham.columbus
    Asked on December 08, 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?

    1607449847_5fcfbcf794732_


    https://form.jotform.com/203424430925146


    Thank you!

  • Profile Image
    Mike
    Answered on December 08, 2020 at 03: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:

    b7zhk.png

  • Profile Image
    graham.columbus
    Answered 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?


    1607708283_5fd3ae7b50f40_

  • Profile Image
    Jessica_H
    Answered on December 11, 2020 at 02: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?


  • Profile Image
    graham.columbus
    Answered 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!!

  • Profile Image
    Jessica_H
    Answered on December 14, 2020 at 01:28 PM

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

    Please refer to the following screenshot:

    1607970460_5fd7ae9c958a5_

    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. 

  • Profile Image
    graham.columbus
    Answered on December 14, 2020 at 02: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

    }

    1607973964_5fd7bc4c80471_

  • Profile Image
    Jessica_H
    Answered on December 14, 2020 at 03: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.