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

Questions
1

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?

2

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.

3

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.

4

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 :thinking:

Ex:

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);
    });
  });
});
5

thanks @mjurczyk I’ll give it a try.