Custom CSS for numeric slider widget 2

  • Profile Image
    Asked on August 14, 2018 at 08:33 PM


    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.

  • Profile Image
    Answered on August 15, 2018 at 03:08 AM

    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.

    1534316008Screen Shot 2018-08-15 at 09.4

    1534316031Screen Shot 2018-08-15 at 09.5

    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.

    1534316248Screen Shot 2018-08-15 at 09.5

    1534316265Screen Shot 2018-08-15 at 09.5

    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.


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