Custom Slider widget

  • Profile Image
    ACHMAD YUDHA
    Asked on June 04, 2022 at 10:55 PM

    Hallo,
    can i add statement strongly disagree and strongly agree in numeric slider widget?
    especially in css code



    This is a re-post of a comment on How to Inject Custom CSS Codes

  • Profile Image
    Ravi
    Answered on June 04, 2022 at 11:55 PM

    Hello ACHMAD YUDHA,

    Thanks for reaching out to Jotform Support. I am sorry, but I am unable to understand what you said in your first comment as you need to have a statement that strongly agrees or strongly disagrees with numeric sliders, especially using CSS code. Could you please explain in a bit more detail? 

    We have Slider in our platform name as Sliders with Calculated Result - Form Widgets | Jotform, which fulfills your requirement as per your above comment . In this it will show whether your user strongly agrees or strongly disagrees for a particular question . Below is the screenshot how it will work:

    GeAeLV4uLPKdRX2D5S3Ax5Z4gjkSiV0jEVhdmu0w

    I have created one demo form as well as you can check out here is the link of the Demo form. If needed you can clone my form to check the settings of the widget. We also have a guide about How to Clone an Existing Form From a URL that you can check out.

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



  • Profile Image
    7776210032
    Answered on June 05, 2022 at 01:18 AM

    Dear Ravi,

    thanks for the response. on the numeric slider menu it can be scored 1-100 (the more to the left and the more to the right). Respondents were asked to give their level of agreement with the questions I gave, where I would like to add a statement that the left (number 1) is strongly disagree and the more to the right (100) is strongly agree. in more detail the statement is under the numbers 1 & 100.

    attached sample,

    Best Regards,1654406285_629c3c8d5a327_Jotform Modific

    Yudha


  • Profile Image
    Billy
    Answered on June 05, 2022 at 01:34 AM

    Thanks for confirming, Yudha. Allow me to check further if what you're after can be achieved by using CSS. We appreciate your patience and understanding.

  • Profile Image
    Billy
    Answered on June 05, 2022 at 02:13 AM

    Thanks for patiently waiting. After tinkering a bit, I think I was able to create the look you're looking for except that the labels are within the slider and not protruding like the one on your screenshot. I've also hidden the numeric value of the slider for better aesthetics. I didn't create a new form but just updated my colleague's sample form:

    1654409215_629c47ffdef92_

    If you want to use this style, please inject the CSS code directly to the Numeric Slider widget:

    #slider:before {
    content: 'Strongly Disagree';
    position: absolute;
    left: 0;
    }
    #slider:after {
    content: 'Strongly Agree';
    position: absolute;
    right: 0;
    }
    #slider:before, #slider:after {
    bottom: -25px;
    font-weight: bold;
    }
    .bfh-slider-value {
    opacity: 0;
    }

    Feel free to add your code to improve the labels. Let us know if there’s anything else we can help you with.

  • Profile Image
    Achmad Yudha 
    Answered on June 05, 2022 at 10:33 PM

    Dear Billy,

    Thanks a lot for the quick response, this is close to what I wanted. But may I ask your help once again to add a display of numbers above the slider position, the goal is for the respondent to know how many numbers he gave on a scale of 1-100. like the following example,

    Best Regards

    Yudha

    1654482774_629d67563ddd6_Jotform.png

  • Profile Image
    Nikola
    Answered on June 06, 2022 at 02:48 AM

    Hello Yudha,

    Please replace this part of the code:

    .bfh-slider-value {
    opacity0;
    }

    with:

    html.wf-inter-n4-active.wf-active {
      padding-top: 15px;
    }
    .bfh-slider>.bfh-slider-handle>.bfh-slider-value {
      top: -20px;
      border:none;
    }

    Demo form: https://form.jotform.com/221561140441947

    1654497998_629da2ce849a2_css.PNG

    Give it a try and let us know if you need any other help.

  • Profile Image
    Achmad Yudha 
    Answered on June 06, 2022 at 03:51 AM

    Dear Nik,

    Thank you very much, it's exactly what I wanted .


    warm regards,

    Yudha