Range Slider With Dual Knobs - On IOS - Initially Shows NaN and Un-moveable Toggle - Rotation Resolves

1

Hi All,

I am writing an app with a range slider.

I can get it to show a dual range slider with knobs initially set to 95,100 with min of 0 and max of 100.

It shows up with a NaN with just one toggle on iOS, it’s fine in electron and android. If I rotate the screen 90 degrees then back (vertical to horizontal, horizontal to vertical) it shows up correctly.

I tried importing the f7 component then doing:

f7.range.get("#rangeslider").updateScale();

to force a redraw and rescale but no joy. Dumping the object it has 95,100 as the values. Nothing else is setting values or messing with the component.

I can even change the value using the f7 component but the toggles don’t move and only the green line on the toggle changes.

Open to any ideas and suggestions.

Thanks to anyone that can help. I have done usual due diligence (stripped all my code out and just had a page with just this component on it).

Code for Slider:

<ListItem>
						          <ListItemCell className="flex-shrink-3">
						            <Range
								      id="rangeslider"
							              dual={true}
							              label={true}
      							      scale={true}
							              min={40}
							              max={100}
							              step={1}
							              value={[95, 100]}
							              color="green"
							              onRangeChange={ event => { console.log('event', event) }}
					            	   />
						          </ListItemCell>
						        </ListItem>

IMG_1044
IMG_10441125×237 28.1 KB

2

Are you using any custom logic when the range slider updates, or is it just updating a label at this point?

3

Thanks for asking for more info.

At the moment happy to just have it work, so logging to the console. It’ll eventually update a variable that is used for a web push later on usual setState(low:value[0], high:value[1]). However I stripped that all out to a console.log to get the two knobs up properly…