# Overwritten value within lil-gui does not update threejs

**URL:** <https://discourse.threejs.org/t/overwritten-value-within-lil-gui-does-not-update-threejs/41689>\
**Category:** Questions\
**Tags:** lil-gui\
**Created:** [August 21, 2022, 6:27pm UTC](https://discourse.threejs.org/t/overwritten-value-within-lil-gui-does-not-update-threejs/41689 "2022-08-21T18:27:21Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![gree303](https://avatars.discourse-cdn.com/v4/letter/g/b3f665/32.png) [@gree303](https://discourse.threejs.org/u/gree303)\
**Post date:** [August 21, 2022, 6:27pm UTC](https://discourse.threejs.org/t/overwritten-value-within-lil-gui-does-not-update-threejs/41689/1 "2022-08-21T18:27:21Z")

</div>

Not sure if this is more of a lil-gui question, but in detail I’m having an issue updating a threejs parameter.

I’d like to control some lil-gui values from the “outside”.  
For this I created a css range-slider in html next to threejs within the same file.

Using jquery to copy the value from the new range-slider to the lil-gui input field.  
Lil-gui does work and changes do reflect visually in threejs.  
But when I use my own range-slider all values do reflect only in the input field of lil-gui.

No matter what I try I can’t get threejs to update the value from the overwritten lil-gui input field.

Do I miss some “controls.update()” within the animate() function?

Help is very much welcome - thanks for getting into this.

Update:  
Here is a working / non-working example:

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/gree303/7cms3nd9/1/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [August 21, 2022, 7:04pm UTC](https://discourse.threejs.org/t/overwritten-value-within-lil-gui-does-not-update-threejs/41689/2 "2022-08-21T19:04:28Z")

</div>

I would recommend sharing some code showing what you have tried, even if it is not working. We cannot guess what might be wrong without those details.

---

<div class="post-metadata">

**Author:** ![gree303](https://avatars.discourse-cdn.com/v4/letter/g/b3f665/32.png) [@gree303](https://discourse.threejs.org/u/gree303)\
**Post date:** [August 21, 2022, 8:15pm UTC](https://discourse.threejs.org/t/overwritten-value-within-lil-gui-does-not-update-threejs/41689/3 "2022-08-21T20:15:16Z")

</div>

Thanks @donmccurdy. I will setup a test scene …

---

<div class="post-metadata">

**Author:** ![gree303](https://avatars.discourse-cdn.com/v4/letter/g/b3f665/32.png) [@gree303](https://discourse.threejs.org/u/gree303)\
**Post date:** [August 21, 2022, 8:49pm UTC](https://discourse.threejs.org/t/overwritten-value-within-lil-gui-does-not-update-threejs/41689/4 "2022-08-21T20:49:25Z")

</div>

Here is a working / non-working example:  
[https://jsfiddle.net/gree303/7cms3nd9/1/](https://jsfiddle.net/gree303/7cms3nd9/1/)

Is this the propper way of doing it? I have a feeling there is a better way.  
Really looking forward to any input.  
Thanks.

---

<div class="post-metadata">

**Author:** ![gree303](https://avatars.discourse-cdn.com/v4/letter/g/b3f665/32.png) [@gree303](https://discourse.threejs.org/u/gree303)\
**Post date:** [August 21, 2022, 9:08pm UTC](https://discourse.threejs.org/t/overwritten-value-within-lil-gui-does-not-update-threejs/41689/5 "2022-08-21T21:08:14Z")

</div>

By the way, …  
Is there a good way accessing these settings within the lil-gui structure?  
Or is it possible to give them some id’s? It doesn’t feel right and I’m sure I will end up having troubles with these “random” names like “input[aria-labelledby=‘lil-gui-name-4’”

Any suggestion is more than needed 🙂 thx

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [August 22, 2022, 2:17pm UTC](https://discourse.threejs.org/t/overwritten-value-within-lil-gui-does-not-update-threejs/41689/6 "2022-08-22T14:17:13Z")

</div>

I would advise against reaching into the HTML DOM of lil-gui itself. That structure might change with any lil-gui release, it is not a stable public API.

What you probably want to do is to listen for changes published by lil-gui itself:

```javascript
gui.add( myObject, 'myProperty' )
	.name( 'Custom Name' )
	.onChange( value => {
		// update your HTML here
	} );

```

If you intend for changes made to the base object to also reflect back into lil-gui, be sure to use the listen() method: [https://lil-gui.georgealways.com/#Controller#listen](https://lil-gui.georgealways.com/#Controller#listen)

---

<div class="post-metadata">

**Author:** ![gree303](https://avatars.discourse-cdn.com/v4/letter/g/b3f665/32.png) [@gree303](https://discourse.threejs.org/u/gree303)\
**Post date:** [August 23, 2022, 10:09pm UTC](https://discourse.threejs.org/t/overwritten-value-within-lil-gui-does-not-update-threejs/41689/8 "2022-08-23T22:09:48Z")

</div>

thanks @donmccurdy

---

<div class="post-metadata">

**Author:** ![gree303](https://avatars.discourse-cdn.com/v4/letter/g/b3f665/32.png) [@gree303](https://discourse.threejs.org/u/gree303)\
**Post date:** [August 23, 2022, 10:47pm UTC](https://discourse.threejs.org/t/overwritten-value-within-lil-gui-does-not-update-threejs/41689/9 "2022-08-23T22:47:55Z")

</div>

@donmccurdy I’ve tried to implement your solution.  
But for some reason I can’t get the .listen() to work.  
lil-gui does speak to the slider, but the slider won’t talk back.

Any clue? I’m sure there is one  
updated jsfiddle: [https://jsfiddle.net/gree303/7cms3nd9/8/](https://jsfiddle.net/gree303/7cms3nd9/8/)  
Line: 174

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [August 24, 2022, 2:50am UTC](https://discourse.threejs.org/t/overwritten-value-within-lil-gui-does-not-update-threejs/41689/10 "2022-08-24T02:50:29Z")

</div>

I don’t think this code on the slider is doing anything:

```javascript
onchange="this.setAttribute('value', this.value);"

```

If the slider’s value has changed, there’s no need to set anything further on the slider itself. You may want to listen for change events from the slider using jQuery’s .on() API, then modify the “params” object that is the data storage for your parameters.

---

<div class="post-metadata">

**Author:** ![gree303](https://avatars.discourse-cdn.com/v4/letter/g/b3f665/32.png) [@gree303](https://discourse.threejs.org/u/gree303)\
**Post date:** [August 24, 2022, 10:53am UTC](https://discourse.threejs.org/t/overwritten-value-within-lil-gui-does-not-update-threejs/41689/11 "2022-08-24T10:53:56Z")

</div>

This onchange snippet is needed for another number input field. It reflects the slider as number-value.  
I removed it for this example. Somehow I forgot to remove this part.

.on() - \> thanks!

Update: Using .on(“input”, … will update in realtime, not only on click-release.

---

<div class="post-metadata">

**Author:** ![gree303](https://avatars.discourse-cdn.com/v4/letter/g/b3f665/32.png) [@gree303](https://discourse.threejs.org/u/gree303)\
**Post date:** [August 24, 2022, 10:49pm UTC](https://discourse.threejs.org/t/overwritten-value-within-lil-gui-does-not-update-threejs/41689/12 "2022-08-24T22:49:22Z")

</div>

Update: This method does work for a simple slider.  
But I ran into issues using a pure css range slider with multiple handles. Everything works the same. Only the visual view is lacking… It’s strange.  
In detail I want to control the emissive parameter of three.js. The parameter within the control does update. But it won’t update the 3d view. Any idea why this isn’t working out?

Is “emissiveintensity” and/or “ligthmapintensity” in someway different to other controls?  
…speaking in terms of updating the renderer?  
_SOLVED_ - had a typo 🙂