Updating slider label

[OliveTrail]

I would like the label of a slider on the settings page to show the value of the slider. (Admittedly, I know next to nothing about jsx, but searches have also been fruitless so far.) My slider represents an hour of the day and I'd like the label to say something like "I eat my first meal around ___", where the blank is filled in by the slider value or a prettied version that might include an am/pm indicator where necessary.

Can anyone provide some sample code or a link to more instructions? Thanks in advance.

[JonFitbit]

I found this example on Discord, let me know how you get on.

<Text>Blah: {props.settingsStorage.getItem('blah')}</Text>
<Slider
 settingsKey="blahValue"
 min="0.5"
 max="0.6"
 step="0.05"
 onChange={value => props.settingsStorage.setItem('blah', value)}
/>

[harpo666]

Is there a way to show the default value when first loaded? At the moment no value is shown on initial load. I have tried adding a defaultValue field, but does not seem to work.

<Text>Value is: {props.settingsStorage.getItem('blah')}</Text>
<Slider
settingsKey="setting1"
min="1"
max="10"
step="1"
defaultValue="2"
onChange={value => props.settingsStorage.setItem('blah', value)}

/>

[harpo666]

I figured it out. You need to change the companion index.js to include something like the below.

https://community.fitbit.com/t5/SDK-Development/Default-settings-on-initial-load/td-p/2848296

function setDefaultSetting(key, value) {
  let extantValue = settingsStorage.getItem(key);
  if (extantValue === null) settingsStorage.setItem(key, JSON.stringify(value));
}

// Initialise settings to default values:
setDefaultSetting("dateFormat", {"selected":[1],"values":[{"name":"Dec 25","value":1}]});