Synchronized Inputs range sliders

Community Help
1

There are great notebooks about:

But I struggle to put all three things together:

  • I would like to have a Form Input containing three range slider
  • The three sliders all have a min:0 and max:1 and are initialized with [0, 0.3], [0.3, 0.6] [0.6, 1]
  • I would like the three sliders to be synchronized such that they remain non-overlapping: e.g. if the user moves the upper bound of slider 1 from 0.3 to 0.5, it causes the lower bound of slider 2 to increase accordingly. If the user extends the upper bound of slider 1 to 0.6 and beyond, then also slider 3 is adjusted

Is that possible to achieve with the existing implementations?

2

Assuming that the ranges are always supposed to touch, you could use a simple workaround that automatically reorders range inputs while dragging:

if you actually need individual ranges, you can then get them via

d3.pairs(values.slice().sort())

I’ve been meaning to support more than two stops in the range slider for a while, but I haven’t gotten around to it yet.

2 Likes
3

Thanks a lot! :+1:
This is really an elegant workaround to my question. In my use case, I would like to keep the labels in the initial order. Is there a way to also swap the labels? Or is it easier to no labels and to adjust the template function such that the returned html contains static html elements in front of the range sliders?

4

The latter. I’ve expanded the last example to include a shared label:

1 Like
5

Thanks a lot!

However I am not sure I can apply more labels with that approach.
Sorry if I was not clear:

My use case is to keep one label per Inputs.range.
I want to to have a form where I can interactively adjust the intervals of a domain which are mapped to a color. Thus, I want to keep one element per slider depicting the color. This element can be a label (to statically display the corresponding color (alternatively it could be an Inputs.color to also let the user adjust it,)
So I want to keep one label per row in the form. To my understanding, the first approach does not work here since it swaps the labels whereas the shared label just allows for one label for the whole form.

I apologize for not being clear on this.

6

I believe this should do what you had in mind?

Note that the range slider wasn’t designed for that use case, so there are some quirks (e.g. handles not lining up, or in some rare instances being able to select an offset past the boundaries).

2 Likes
7

Amazing! Thanks so much for your work - like always in lightening speed. I marked this answer as the solution since this is exactly what I was looking for!

1 Like
8

The bug that let you drag ranges past their neighbors has been fixed. Should work pretty well now.

1 Like
9

Added support and examples for inputs in separate cells:

2 Likes