Single drag handle controlling 2 inputs

[klonos]

Locking sliders together could be used as a workaround to get close to what I'm after, but not exactly...

The requirement is that there are 2 inputs (could be more, but lets go with 2 as the simplest form of this request), and a single handle controls the input of two inputs. Consider the scenario of percentages: you need to split something (100%) into 2 portions, and the single handle needs to update 2 inputs with the values as it's being moved.

• if the handle is in the middle, then the inputs are both 50%/50%
• moving the handle to the left (lets say in steps of 10%) would update the inputs to be 40/60, then 30/70 and so on
• moving the handle to the right would do the opposite, setting the input values to 60/40, then 70/30, and so on

I though that this could be achieved if you add two locked sliders, hide the one from view, but then I'd need one of the sliders to "decrease" while its locked pair increases, and the other way around. (I hope that I'm doing a good job explaining this).

One would think: why not use a single input, and then subtract its value from the 100%? That could work, but not if you add more sliders/inputs in the mix though. (unless there's a trick I'm missing).

To add a real use case where I think that this could be used, that would be this feature request for Backdrop CMS: https://github.com/backdrop/backdrop-issues/issues/5167 where I was thinking to replace the current UI of selecting region widths with a noUISlider, with specific steps defined.

So this for example, would be the simple single-handle-controls-two-inputs case:

...whereas there would be a case with 2 handles controlling 3 inputs:

...as well as 3 handles controlling 4 inputs:

[leongersen]

One would think: why not use a single input, and then subtract its value from the 100%? That could work, but not if you add more sliders/inputs in the mix though. (unless there's a trick I'm missing).

If I'm reading correctly what you are after, the trick here would be to subtract the previous handle values and the slider edges (0 and 100) from each other.

E.g. In your last example, the case 17%/33%/25%/25% would have a three-handle slider (a range of 0-100). The values for the handles would be 17, 50 (17 + 33), and 75 (17 + 33 + 25). Splitting these three values into the four chucks would be:

values[0] - 0         // 17
values[1] - values[0] // 33
values[2] - values[1] // 25
100       - values[2] // 25

[klonos]

Hmm 🤔 ...it's not about the math that would set the initial position of the handles in the slider(s), rather than figuring out the right step numbers, and allowing setting 2 inputs based on the position of a single handle.

I'd have to give it more thought and try to play with this to figure it out, but thanks @leongersen

[leongersen]

I'll close this, feel free to follow up if you have more questions.

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.