How To Lock Slider And Prevent Updating Of Values With Mouse Into Dat.gui Menu

I try to implement a way to prevent the updating of values with mouse (actually when the three.js animation has started, launched with a click on button). For the moment, I have th

Solution 1:

I would do this. The slider is not a form element, there's nothing to disable in the traditional w3c sense. Luckily we can use pointer-events and disable it properly as if it were a form element using just public dat.gui properties.

var speeder = menu.add(text, 'speed', -5, 5);
speeder.domElement.style.pointerEvents = "none"
speeder.domElement.style.opacity = .5;

Solution 2:

The solution given by @Radio works pretty well. But, with sliders, the slider is a sibling of the text box's DOM element. We need to disable pointer events on the div which contains all the controls (and which is not exposed directly by dat.gui). So,

var speeder = menu.add(text, 'speed', -5, 5);
// disables the text box
speeder.domElement.style.pointerEvents = "none"// disables all controller elements related to "speeder"
speeder.domElement.parentElement.style.pointerEvents = 'none'

Solution 3:

When the Start button is pressed, set:

controllerRotationx.__li.setAttribute( "style", "display: none" );

Solution 4:

thanks for tips on my side i hack the Common controller so able to chainning.

gui.add(this, '_screenW').disable(true);

  Common.extend(controller,                                   {
    disable: function disable(v) {
      this.domElement.style.pointerEvents = v?"none":"auto";
      this.domElement.style.opacity = v?.5:1;
      return controller;
    },