Custom Slider widget

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

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:

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.

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,

Yudha

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.

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:

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.

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

Hello Yudha,

Please replace this part of the code:

.bfh-slider-value {

opacity: 0;

}

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

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

Dear Nik,

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

warm regards,

Yudha