Interacting with Settings Page

[RisoSystems]

I'm looking for a way to dynamically change the settings page - specifically the label on a slider - based upon the value of the slider. Or, to put it simply, a label that shows some text and the current value of the slider.

I've tried the usual way of getting a handle for the object, and can add an ID to the slider element, but can't figure out the parent object for the settings screen.

For example document.getElementById('mySlider') and similar constructions report an undefined parent object.

Any ideas?

Thanks.

[RisoSystems]

Worth mentioning that I am aware that the code generates an object which is returned to some parent and rendered, and that the React documentation doesn't mention the use of variables in labels.

[Gondwana · Accepted solution]

Be careful not to try to mix-and-match APIs. For example, document only exists on the watch (device) and can only be used to manipulate SVG elements displayed thereon.

You can probably do what you want using straight react in your .jsx (although you can involve companion index.js if you really need to). The basic approach I'd use would be to place executable react code {} where you specify the string to be displayed, constructing the string from something coming out of props.settingsStorage.getItem(...).

In the event handler for the setting element (slider), store the value you want in props.settingsStorage.setItem(...). Doing so should cause react to automatically update the label.

The settingsStorage item key doesn't have to correspond to any declared setting element.

[RisoSystems]

Thanks. That idea opened the door for me bigtime.

[RisoSystems]

Here's a follow-up- I'm attempting to write a generic function which would return all settings (presumably a settings object with key:value pairs stored as a JSON file?). I've been looking at LiveStorage but I'm not getting anywhere. Can you point me in the right direction?