user37422 user37422 - 1 year ago 173
Javascript Question

dat.GUI - Looking for a way 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

animation has started, launched with a click on button).

For the moment, I have the following
menu :

enter image description here

Once "start" button is clicked, I would like to prevent user from modifying with mouse the parameters "
Rotation x
" and "
Rotation y

Here is the concerned part of code for this menu :

// 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 ');

When I click on reset button, I call the following function :

// Reset Button
resetButton.onclick = function ResetParameters() {


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

for (var i in gui.__controllers) {



I don't know if there is an option for controller to lock these sliders which usually change their values.

Is it possible ?

Thanks for your help.


Maybe I could wrapper the dat.GUI menu into a div and make this div not clickable, is it a solution ?


I tried to apply the method used on Method for disabling a button in dat.gui?

Following this solution, I have added the extension into
, just after :

dat.controllers.FunctionController = (function (Controller, dom, common) {



the following added code snippet is :

function blockEvent(event)

Object.defineProperty(dat.controllers.FunctionController.prototype, "disabled", {
get: function()
return this.domElement.hasAttribute("disabled");
set: function(value)
if (value)
this.domElement.setAttribute("disabled", "disabled");
this.domElement.addEventListener("click", blockEvent, true);
this.domElement.removeEventListener("click", blockEvent, true);
enumerable: true

Is extension code well located into
source ?

Then, I set the property "
" into my code to prevent user from sliding "
" with mouse (once start button is pressed ) :

if (animation)
controllerRotationx.__li.disabled = true;

Unfortunately, my method doesn't work : when animation is started, I can still move the slider contained into "

I saw that above link (Method for disabling a button in dat.gui?), this was about a button and not for a slider, does it change anything for my case ?

I didn't find an explicit controller for the slider.

if someone could see what's wrong, this would be great.

Answer Source

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); = "none" = .5;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download