Synchronized inputs with range-slider

Community Help
1

Any exemple on how to set a range or a property of a range-slider input from a button ?

I cannot figure out how to use Synchronized inputs.

Here is a test

2

The Synchronized Inputs technique depends on an input implementing a special getter-setter pattern documented here. Most of the official Observable Inputs implement it; most community inputs (or plain HTML inputs, like <input />) donā€™t.

The range slider is from a community notebook by @mootari and doesnā€™t implement the same pattern. Maybe it could, although Iā€™d have to think about how itā€™d be different since the value is an array object.

Hereā€™s an example of how you could accomplish the same sort of thing without using set on the rangeSlider directly:

2 Likes
3

Juice is designed to retrofit the get/set behaviour to components that did not include it, and has a good example of making range sliderā€™s min and max backwritable. You could apply it to mootariā€™s too

1 Like
4

Or you could just import interval instead, which is designed to match Observableā€™s Inputs library:

import {interval} from '@mootari/range-slider'

viewof s1 = interval([0, 100], {
  step: 1,
  value: [0, 20],
  label: "Range"
})

image

See the changelog for more details.

3 Likes
5

I adopt the use of a mutable value.

Seems the easier solution for me.
Thanks a lot.

6

Iā€™ve sent you a suggestion: Comparing Synchronized Inputs with range-slider to Synchronized Inputs with range-slider / Observable

7

oh snap hadnt seen this, nice