How to lock slider and prevent updating of values with mouse into dat.GUI menu
<p>I try to implement a way to prevent the updating of values with mouse (actually when the <code>three.js</code> animation has started, launched with a click on button).</p>
<p>For the moment, I have the following <code>dat.GUI</code> menu:</p>
<p><a href="https://i.stack.imgur.com/5xsI1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5xsI1.png" alt="enter image description here" /></a></p>
<p>Once &quot;start&quot; button is clicked, I would like to prevent user from modifying with mouse the parameters &quot;<code>Rotation x</code>&quot; and &quot;<code>Rotation y</code>&quot;.</p>
<p>Here is the concerned part of code for this menu:</p>
<pre><code>// Create GUI
var gui = new dat.GUI({
      autoplace: false, 
      width: 350,
          height: 9 * 32 - 1
});

var params = {
      GreatCircle : '',
      Rotationx : torusRotationInitX,
      Rotationy : torusRotationInitY,
      StartingVector : '',
      ComponentVectorTheta : 15.0,
      ComponentVectorPhi : 15.0,
      CovariantDerivativeVector : '',
      ComponentCovariantDerivativeTheta : 15.0,
      ComponentCovariantDerivativePhi : 15.0
};

// Set parameters for GUI
gui.add(params, 'GreatCircle').name('Great Circle ');
controllerRotationx = gui.add(params, 'Rotationx', 0, 2*Math.PI, 0.001).name('Rotation x ');
controllerRotationy = gui.add(params, 'Rotationy', 0, 2*Math.PI, 0.001).name('Rotation y ');
...
</code></pre>
<p>When I click on reset button, I call the following function:</p>
<pre><code>  // Reset Button
  resetButton.onclick = function ResetParameters() {

  ...

  // Reinitialize parameters into gui
  params.Rotationx = torusRotationInitX; 
  params.Rotationy = torusRotationInitY; 

  for (var i in gui.__controllers) {
     gui.__controllers[i].updateDisplay();
  }

render();

}
</code></pre>
<p>I don't know if there is an option for controller to lock these sliders which usually change their values. Is it possible?</p>
<h2>Update 1</h2>
<p>Maybe I could wrapper the dat.GUI menu into a div and make this div not clickable, is it a solution?</p>
<h2>Update 2</h2>
<p>I tried to apply the method used on <a href="https://stackoverflow.com/questions/24461964/method-for-disabling-a-button-in-dat-gui">Method for disabling a button in dat.gui?</a></p>
<p>Following this solution, I have added the extension into <code>dat.gui</code>, just after:</p>
<pre><code>dat.controllers.FunctionController = (function (Controller, dom, common) {

...

});
</code></pre>
<p>The following added code snippet is:</p>
<pre><code>function blockEvent(event)
{
  event.stopPropagation();
}

Object.defineProperty(dat.controllers.FunctionController.prototype, &quot;disabled&quot;, {
  get: function()
  {
    return this.domElement.hasAttribute(&quot;disabled&quot;);
  },
  set: function(value)
  {
    if (value)
    {
      this.domElement.setAttribute(&quot;disabled&quot;, &quot;disabled&quot;);
      this.domElement.addEventListener(&quot;click&quot;, blockEvent, true);
    }
    else
    {
      this.domElement.removeAttribute(&quot;disabled&quot;);
      this.domElement.removeEventListener(&quot;click&quot;, blockEvent, true);
    }
  },
  enumerable: true
});
</code></pre>
<p>Is extension code well located into <code>dat.GUI</code> source?</p>
<p>Then, I set the property &quot;<code>disabled</code>&quot; into my code to prevent user from sliding &quot;<code>controllerRotationx</code>&quot; with mouse (once start button is pressed):</p>
<pre><code>if (animation)
controllerRotationx.__li.disabled = true;
</code></pre>
<p>Unfortunately, my method doesn't work : when animation is started, I can still move the slider contained into &quot;<code>controllerRotationx</code>&quot;.</p>
<p>I saw that above link (<a href="https://stackoverflow.com/questions/24461964/method-for-disabling-a-button-in-dat-gui">Method for disabling a button in dat.gui?</a>), this was about a button and not for a slider, does it change anything for my case?</p>
<p>I didn't find an explicit controller for the slider.</p>