# Synchronized Inputs range sliders
**URL:** https://talk.observablehq.com/t/synchronized-inputs-range-sliders/7652
**Category:** Help
**Created:** [February 20, 2023, 8:58pm UTC](https://talk.observablehq.com/t/synchronized-inputs-range-sliders/7652 "2023-02-20T20:58:23Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@EE2dev](https://talk.observablehq.com/u/EE2dev)
#### Post date: [February 20, 2023, 8:58pm UTC](https://talk.observablehq.com/t/synchronized-inputs-range-sliders/7652/1 "2023-02-20T20:58:23Z")
There are great notebooks about:
- Input range slider (interval): [Range Slider / Fabian Iwand | Observable](https://observablehq.com/@mootari/range-slider)
- Form Inputs [Form Input / Observable Inputs / Observable | Observable](https://observablehq.com/@observablehq/input-form?collection=@observablehq/inputs)
- Synchronized Inputs [Synchronized Inputs / Observable | Observable](https://observablehq.com/@observablehq/synchronized-inputs?collection=@observablehq/inputs)
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?
---
### Author:  [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [February 20, 2023, 11:46pm UTC](https://talk.observablehq.com/t/synchronized-inputs-range-sliders/7652/2 "2023-02-20T23:46:03Z")
Assuming that the ranges are always supposed to touch, you could use a simple workaround that automatically reorders range inputs while dragging:
https://observablehq.com/embed/7629e0d73aefa284@paused?cells=viewof+demoDrag
if you actually need individual ranges, you can then get them via
```javascript
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.
---
### Author:  [@EE2dev](https://talk.observablehq.com/u/EE2dev)
#### Post date: [February 21, 2023, 12:29am UTC](https://talk.observablehq.com/t/synchronized-inputs-range-sliders/7652/3 "2023-02-21T00:29:49Z")
Thanks a lot! 👍
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?
---
### Author:  [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [February 21, 2023, 8:56am UTC](https://talk.observablehq.com/t/synchronized-inputs-range-sliders/7652/4 "2023-02-21T08:56:36Z")
> [@EE2dev](#):
>
> 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?
The latter. I’ve expanded the last example to include a shared label:
https://observablehq.com/embed/7629e0d73aefa284?cells=viewof+demoType
---
### Author:  [@EE2dev](https://talk.observablehq.com/u/EE2dev)
#### Post date: [February 21, 2023, 9:48am UTC](https://talk.observablehq.com/t/synchronized-inputs-range-sliders/7652/5 "2023-02-21T09:48:16Z")
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.
---
### Author:  [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [February 21, 2023, 11:55am UTC](https://talk.observablehq.com/t/synchronized-inputs-range-sliders/7652/6 "2023-02-21T11:55:43Z")
I believe this should do what you had in mind?
https://observablehq.com/embed/c826aea92a8ae6d4@74?cells=viewof+demo
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).
---
### Author:  [@EE2dev](https://talk.observablehq.com/u/EE2dev)
#### Post date: [February 21, 2023, 12:14pm UTC](https://talk.observablehq.com/t/synchronized-inputs-range-sliders/7652/7 "2023-02-21T12:14:48Z")
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!
---
### Author:  [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [February 22, 2023, 9:02am UTC](https://talk.observablehq.com/t/synchronized-inputs-range-sliders/7652/8 "2023-02-22T09:02:06Z")
The bug that let you drag ranges past their neighbors [has been fixed](https://observablehq.com/compare/c826aea92a8ae6d4@86...c826aea92a8ae6d4@96#linkRanges). Should work pretty well now.
---
### Author:  [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [February 22, 2023, 9:33am UTC](https://talk.observablehq.com/t/synchronized-inputs-range-sliders/7652/9 "2023-02-22T09:33:38Z")
Added support and examples for inputs in separate cells:
https://observablehq.com/embed/c826aea92a8ae6d4@latest?cells=viewof+rangeA%2Cviewof+rangeB%2Cviewof+rangeC%2CdemoSeparate