06-17-2021 20:45
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

06-17-2021 20:45
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Hello everyone, I am a relatively new developer in Fitbit world. I am trying to code Settings and have a couple of questions:
1) I have 2 sliders representing upper and lower heart rate thresholds. I need to make it such that 'upper threshold' slider cannot be dragged lower than the 'lower threshold' slider and vice versa (otherwise lower threshold can be higher than upper). I am trying to set value of slider in onChange, but it doesn't seem to work:
<Slider
label={`Custom upper threshold: ${props.settings.upper} bpm`}
settingsKey="upper"
min="20"
max="220"
onChange={value => {
if (parseInt(value) < parseInt(props.settings.lower)) {
// none of below lines seem to set the value
//props.settingsStorage.setItem('upper', parseInt(props.settings.lower));
//props.settingsStorage.setItem('upper', props.settings.lower);
//props.settings.upper.value = props.settings.lower;
//props.settings.upper = props.settings.lower;
//props.settings.upper = parseInt(props.settings.lower);
//this.value = parseInt(props.settings.lower);
//this.value = props.settings.lower;
}
}}
/>
<Slider
label={`Custom lower threshold: ${props.settings.lower} bpm`}
settingsKey="lower"
min="20"
max="220"
/>
None of those commented javascript lines seem to be able to change the value in the 'upper' slider onChange event. Some of them make the slider 'stuck' visually in UI, but the value is still changing in the settingsStorage.
2) How do I call a function in companion/index.js from settings/index.jsx? For example:
compainon/index.js file:
...
function testFunc(value) {
console.log('>>>>>>>>>> upper threshold val: ' + value);
}
...
settings/index.jsx file:
...
<Slider
label="test
settingsKey="somekey"
min="0"
max="10"
onChange={value => testFunc(value)}
/>
...
Answered! Go to the Best Answer.

Accepted Solutions
06-17-2021 21:57
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


06-17-2021 21:57
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
1) I suspect that what's happening here is that onChange() gets called before the system updates the slider to the user-selected value. As a result, any change you make to the item itself here will be over-written subsequently. I've managed to achieve what you want by a messier method (that's close to your second question): forget about onChange() in the SVG, let the change go through to the companion, validate it there and, if you don't like the new value, setItem() to what you want.
2) The only way I know of is to set a setting in the .jsx, and pick up the changed value in the companion js. Note that settings don't have to correspond to .jsx setting components. However, you may not even need to do this: you can include arbitrary js functions directly in your jsx (so long as they don't need to access the companion API). But beware that the caveat on onChange still applies.
Gondwana Software

06-17-2021 21:57
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


06-17-2021 21:57
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
1) I suspect that what's happening here is that onChange() gets called before the system updates the slider to the user-selected value. As a result, any change you make to the item itself here will be over-written subsequently. I've managed to achieve what you want by a messier method (that's close to your second question): forget about onChange() in the SVG, let the change go through to the companion, validate it there and, if you don't like the new value, setItem() to what you want.
2) The only way I know of is to set a setting in the .jsx, and pick up the changed value in the companion js. Note that settings don't have to correspond to .jsx setting components. However, you may not even need to do this: you can include arbitrary js functions directly in your jsx (so long as they don't need to access the companion API). But beware that the caveat on onChange still applies.
Gondwana Software

06-17-2021 23:44
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

06-17-2021 23:44
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
Thank you very much, Peter! I've changed the code from onChange in jsx to settingsStorage.onchange in companion js + setItem() and now it behaves in UI like I wanted.
06-18-2021 00:14
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


06-18-2021 00:14
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
Well done; glad it worked!
Gondwana Software
