Custom Slider widget

    Answered on June 04, 2022 10:55 PM

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

  • Ravi_g Jotform Support
    Answered on June 04, 2022 11:55 PM


    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 Screenshot 10

    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.

  • 7776210032
    Answered on June 05, 2022 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 Screenshot 10


  • Billy JotForm Support
    Answered on June 05, 2022 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.

  • Billy JotForm Support
    Answered on June 05, 2022 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  Screenshot 10

    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.

  • Achmad Yudha
    Answered on June 05, 2022 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


    1654482774 629d67563ddd6 Jotform Screenshot 10

  • Nikola JotForm Support
    Answered on June 06, 2022 02:48 AM

    Hello Yudha,

    Please replace this part of the code:

    .bfh-slider-value {

    with: {
      padding-top: 15px;
    .bfh-slider>.bfh-slider-handle>.bfh-slider-value {
      top: -20px;

    Demo form:

    1654497998 629da2ce849a2 css Screenshot 10

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

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

    Dear Nik,

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

    warm regards,