01-28-2022 08:54
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

01-28-2022 08:54
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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.
Answered! Go to the Best Answer.

Accepted Solutions
01-28-2022 11:39
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


01-28-2022 11:39
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
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.
Gondwana Software
01-28-2022 09:26
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

01-28-2022 09:26
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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.

01-28-2022 11:39
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


01-28-2022 11:39
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
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.
Gondwana Software
01-28-2022 13:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

01-28-2022 13:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
Thanks. That idea opened the door for me bigtime.
03-23-2022 17:21
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-23-2022 17:21
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
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?
