f7-range: knob not at right position after unhide

[lrbalt]

If you start your app with a hidden range slider, the value is set, but the knob is not positioned at the right position. If you unhide, the slider looks like:

If you examine the slider properties, the value property is set to the correct value. If you try to change the slider, it sends a NaN to the range:change handler. The value property is also changed to NaN.

When changing tabs and back, the knob is correctly positioned, I think because of an tab:show event.

This only happens if the slider is hidden at the start of the app. I'm using v-show to show or hide the slider using a boolean.

[nolimits4web]

It is impossible to detect size of anything if it is hidden. Use v-if instead or use .calcSize() and .layout() methods when it becomes visible on Range slider instance (which can be retreived using f7Range component property)

[lrbalt]

using both calcSize and layout, the slider works.

Perhaps you can add both calls to the default range:change handler? This way F7 handles this edge-case better?

[lrbalt]

if others are having the same issue, adding this to your methods on a vue page this will solve it:

updateRange(selector, value) {
   let r = this.$f7.range.setValue(selector, value);
   r.calcSize();
   r.layout();              
}