How do I make the slider handles move as a group while obeying the min/max constraints?

[Nokocchi]

I am using Svelte, and I am using this slider for my project.

Current situation:
In short, I have multiple values that I want to be able to change at the same time. An example could be [5, 7, 9, 10, 14] with min = 0 and max = 20. Each value has its own slider handle. If you grab the handle for value 9 and move it to the left, decreasing its value, my on:change function decreases all the other values with the same amount. They essentially move as a group. Once you have moved 9 to the left 5 steps, 5 will have moved down to 0. At this point, it should not be possible to move any of the handles to the left anymore. If you try to move it any further, then in my on:change function I do not move any of the other values, and I set the current slider handle back to its previous value. All the other sliders handles stay where they are, as they should, except the one I am currently moving. That one can still move freely, which it shouldn't.

Issue:
The current slider handle does not get set back to its previous value. Or, it does briefly, but I assume that since I am still controlling it directly in the browser, this overrides any changes to its value made by my code.

Possible solutions

1. Any out-of-the-box solution?
2. Only allow the outermost slider handles to be dragged. This would mean that they automatically get limited by the min/max constraints, keeping all the middle values valid. But how do I do this? Can I disable individual slider handles? Or style them to look disabled and add a transparent div on top, or something like that?
3. Add a transparent div on top of the whole slider, which programmatically changes the underlying slider values at the same time if and only if the change is allowed due to min/max constraints. So, only valid changes are propagated to the slider.
4. Disabling the multi-value slider, and controlling it through a separate slider with a single handle. Using my example above, this slider would go from -5 to +6 with an initial value of 0. It basically describes the offset from the initial values, and will move each handle of the multi-slider with this offset. If you pick +6, you get the values [11, 13, 15, 16, 20] and if you pick -5, you get [0, 2, 4, 5, 9], making sure that all values are kept within the min/max constraints.
5. Changing the source code to allows me to inject a function that checks whether the next move would be valid, and if it isn't, the slider you are holding on to won't actually move. I guess I could take inspiration from how the min/max constraints are implemented, or the way that, with few possible values and a wide slider, the slider only jumps to the next value if you move it far enough.

I assume that 1 is not possible, 2 and 4 don't look as good UI-wise, 5 would be pretty difficult, and 3 seems the best but I'm wondering if there is a better solution?

[simeydotme]

Hi @Nokocchi ... wow that's a pretty complicated setup which I don't fully understand the use-case.
Firstly, before answering, maybe you can provide a quick example of what you've created using the REPL link in the Readme ? I assume you should be able to recreate it with the minimum needed code to demo your situation?

Next; Basically I think you have explored all the possibilities correctly.
Here's what I think you have currently, but I have fixed the problem you are facing;
https://svelte.dev/repl/73c2b90c01e447c19ce449957f5a7d39?version=4.2.0

However, it is still not the ideal (frozen handles) situation. I'm actually curious if it's possible, and how to, implement a e.preventDefault() type functionality to the on:change event? if you know how, and want to share / implement please go ahead!

[Nokocchi]

Thank you so much for the quick reply! I really appreciate it! :)

Your REPL is very close to what I currently have. I have made a REPL myself though: https://svelte.dev/repl/8bd062807b954943bba0f9a1e2bbcb9e?version=4.2.0

The use case is that I am building a svelte app where the user can change colors of an image. One of the ways of changing colors is by using RGB/HSL sliders. So you select one of the colors, and then you can change the R value with a slider, the G value with a slider, and the B value with a slider. That all works well, and I only need one handle per slider. But I am currently implementing a new feature where you can pick multiple different colors at once, and change them all at once. In my REPL,, notice that each value corresponds to the R value of a color. I want to move them as a group to keep the proportions between the colors the same. This means that your REPL unfortunately doesn't fix my issue, as the distance between the slider handles don't always stay the same. But I like the way you coded it though!

Edit2: I thought I had fixed it with preventDefault, but I just coded it wrong and the nullpointer exception somehow ended up resulting in the desired behavior.. Ignore my previous edits :(

[Nokocchi]

I did it! It works now.

I changed your source code a tiny bit to make it work, so I cannot make a REPL, but I will explain what I did.
I added an export variable by the name multiMoveMode, and then in the moveHandle() function, I added

    if (multiMoveMode) {
          let delta = value - values[index];
          let anyIllegalValues =
              values.filter((val) => {
                  let newVal = val + delta;
                  return newVal < min || max < newVal;
              }).length > 0;
          if (anyIllegalValues) {
              return value;
          } else {
              for (let i = 0; i < values.length; i++) {
                  values[i] += delta;
              }
          }
        }

I basically intercept the function that decides whether to move the handle or not. If any of the nubs would be pulled out of the legal range, this function simply returns and does nothing.

I haven't tested this in very much detail, so it might need some fine-tuning. But I can bind to the values array and it works as intended for my specific use case.

Are you okay with me using a modifying version of your source code in my hobby project? I will give credit, and the project is entirely free to use and will not be used in any commercial way :)

[simeydotme]

It's fine to use!
It would be great to drop a fully working REPL here with a screenshot for any other people in future wishing to learn from you! :)

[simeydotme]

oh, I just realised what you meant; you forked the <RangeSlider /> component source.

Yes, ofcourse you are able to do that. That's the joy of open source!
Just be aware as I make improvements/fixes in the future you'll need to keep re-integrating those changes. And I won't be able to provide support/protect your changes.

[Nokocchi]

Thank you so much for all the help! I am not sure I could have implemented this feature without your code.

My project is still work in progress (bad UI optimized for mobile, bugs and code that needs refactoring), but you can see the multiMoveMode in action here :) https://nokocchi.github.io/PokemonSpriteEditor3/
In the "Edit Sprite" page, you can right click on the colors in the color palette to select multiple colors.