Custom CSS for numeric slider widget 2

Hi.

Can you provide some custom CSS to make one of my numeric slider widgets Read Only?

I want to set it as an EXAMPLE on my form of what to do with the others. I have set a default value, but would like to make it un-editable if possible.

Unfortunately, this widget has not "Read Only" feature yet. I will open a feature request for you. 

Good news is that I have a solution for you. It can be tricky and not what you want exactly but it makes the slider untouchable.

We will add some CSS to the page but here is the trick: After that, you can not change that specific slider's other options like default value etc. So you should adjust everything and then add the CSS code to your page.

First, you should learn the field's ID, to make that you should click the widget's properties and from left should go to Advanced tab.

When you expanded the field details section you can see the Field IDs.  It is #input_4 for me. We will use it.

However, not the #input_4 , we will use it as #id_4

Now we should embed the CSS code to the Form Designer's CSS section, not the widget.

This CSS code makes your "#id_4" element which is a numeric slider for me unable to click, drag-drop by your mouse cursor.

Here is your code. You can use it by changing the ID.

#id_4 {

    pointer-events : none;

}

And this is my form, you can look at it.

https://www.jotform.com/82260827123957

I hope this helps. If you have any further question please let us now.