Custom Slider widget

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.

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.

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.