javascript - How to change slider value on dat.GUI and how to reset dat.GUI - Stack Overflow

admin管理员组

文章数量:1410712

1) I'm working on a dat.GUI application on which I have 2 sliders. I want to reset one when the other is changed. For example :

 var FizzyText = function() {
   this.slider1 = 0;
   this.slider2 = 0;
};
var gui = new dat.GUI();
var text = new FizzyText();
var slider1 = gui.add(text, 'slider1', 0, 5);
var slider2 = gui.add(text, 'slider2', 0, 5);

slider1.onChange(function(value){
  console.log(value); 
  text.slider2 = 0; // this doesn't work
});

slider2.onChange(function(value){
  console.log(value);
  text.slider1 = 0; // this doesn't work
});

1) I'm working on a dat.GUI application on which I have 2 sliders. I want to reset one when the other is changed. For example :

 var FizzyText = function() {
   this.slider1 = 0;
   this.slider2 = 0;
};
var gui = new dat.GUI();
var text = new FizzyText();
var slider1 = gui.add(text, 'slider1', 0, 5);
var slider2 = gui.add(text, 'slider2', 0, 5);

slider1.onChange(function(value){
  console.log(value); 
  text.slider2 = 0; // this doesn't work
});

slider2.onChange(function(value){
  console.log(value);
  text.slider1 = 0; // this doesn't work
});

This is just an example but it is very important that the slider is reseted or set to its default value (in FizzyText).

The example above es from https://workshop.chromeexperiments./examples/gui/#9--Updating-the-Display-Automatically where I can't automatically update the slider

2) I want to add a reset button in which all sliders will be reseted. But with the previous answer I'd be able to reset all values

• javascript
• slider
• dat.gui

Share Improve this question Follow asked Dec 15, 2016 at 0:29 HearnerHearner 2,70733 gold badges1818 silver badges3434 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I found the answer : gui.__controllers is and array of controllers. So I just added something like that :

var FizzyText = function () {
    this.slider1 = 0;
    this.slider2 = 0;
};
var gui = new dat.GUI();
var text = new FizzyText();
var slider1 = gui.add(text, 'slider1', 0, 5);
var slider2 = gui.add(text, 'slider2', 0, 5);

/* Here is the update */
var resetSliders = function (name) {
    for (var i = 0; i < gui.__controllers.length; i++) {
        if (!gui.__controllers.property == name)
            gui.__controllers[i].setValue(0);
    }
};

slider1.onChange(function (value) {
    console.log(value);
    resetSliders('slider1');
});

slider2.onChange(function (value) {
    console.log(value);
    resetSliders('slider2');
});

It's best to reset dat.GUI's values by using the controller's .initialValue instead of hard coding it, so the following would be preferable: gui.__controllers[i].setValue(gui.__controllers[i]);

You can reset all of a GUI's controllers by using gui.__controllers.forEach(controller => controller.setValue(controller.initialValue));

本文标签： javascriptHow to change slider value on datGUI and how to reset datGUIStack Overflow