# More of a lil-gui quiestion but hopefully someone know a trick

**URL:** <https://discourse.threejs.org/t/more-of-a-lil-gui-quiestion-but-hopefully-someone-know-a-trick/41850>\
**Category:** Questions\
**Tags:** lil-gui\
**Created:** [August 24, 2022, 11:12pm UTC](https://discourse.threejs.org/t/more-of-a-lil-gui-quiestion-but-hopefully-someone-know-a-trick/41850 "2022-08-24T23:12:51Z")\
**Posts on this page:** 5\
**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 24, 2022, 11:12pm UTC](https://discourse.threejs.org/t/more-of-a-lil-gui-quiestion-but-hopefully-someone-know-a-trick/41850/1 "2022-08-24T23:12:51Z")

</div>

In the lil-gui GUI.element you can set a .min() and .max().  
But if this setting is also controlled by another 3rd party slider outside of lil-gui these min/max don’t “stop” at their values and instead exceed further out.  
Is there a way of forcing them at a certain point no mather what?

If not, do you think a jquery overwrite could force it?

---

<div class="post-metadata">

**Author:** ![Chris\_O](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chris_o/32/23167_2.png) [@Chris\_O](https://discourse.threejs.org/u/Chris_O)\
**Post date:** [August 24, 2022, 11:58pm UTC](https://discourse.threejs.org/t/more-of-a-lil-gui-quiestion-but-hopefully-someone-know-a-trick/41850/2 "2022-08-24T23:58:25Z")

</div>

Why not set the range on your slider? That way it never goes over. Or make your slider control what you trying to change directly without lil gui. Ive done this before. I was using react.

---

<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 25, 2022, 7:54am UTC](https://discourse.threejs.org/t/more-of-a-lil-gui-quiestion-but-hopefully-someone-know-a-trick/41850/3 "2022-08-25T07:54:57Z")

</div>

Hi @Chris_O - the range min/max is set on both sliders.  
BUT the master slider(html: 200-100) does need to exceed the limits of the slave slider (lil-gui: Limit 0-1). On top the range-values are different and inverted. I mapped them via a simple function.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [August 25, 2022, 10:46am UTC](https://discourse.threejs.org/t/more-of-a-lil-gui-quiestion-but-hopefully-someone-know-a-trick/41850/4 "2022-08-25T10:46:44Z")

</div>

> [@gree303](#):
>
> Is there a way of forcing them at a certain point no mather what?

Depending on how you code is structured, you should be able to just create a proxy setter function and apply it to both the lil-gui and the HTML slider 🤔

Ex:

```javascript
const properties = [{
  name: 'property',
  min: 0.0,
  max: 1.0
}];

properties.forEach(({ name, min, max }) => {
  lilGui.add(object, name, min, max);

  // NOTE This clamping will just skip if slider elements do not exist
  [...document.querySelectorAll(`.slider-${name}`)].forEach(slider => {
    slider.addEventListener('change', event => {
      object[name] = THREE.MathUtils.clamp(event.target.value, min, max);
    });
  });
}); 

```

---

<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 25, 2022, 1:15pm UTC](https://discourse.threejs.org/t/more-of-a-lil-gui-quiestion-but-hopefully-someone-know-a-trick/41850/5 "2022-08-25T13:15:04Z")

</div>

thanks @mjurczyk I’ll give it a try.