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