2 questions: How to set value of slider and how to call function from index.js from index.jsx?

[MFamily]

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)}
  />
...

[Gondwana · Accepted solution]

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.

[MFamily]

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.

[Gondwana]

Well done; glad it worked!