Closed lrbalt closed 6 years ago
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)
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?
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();
}
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 therange:change
handler. The value property is also changed toNaN
.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.