I’ve found a problem when trying to change a color to an IonRange dynamically, but I’m not sure whether this is a bug or not. An example:
An IonRange with dual knobs. It must go from red, if the upper-lower knobs value is lower than 25, to green, as their distance becomes longer.
<template>
<ion-range
min="0" max="100"
dualKnobs="true" pin="true"
snaps="true" step="1"
ticks="false" value="0"
:color="percentLevel"
@ionChange="changeRange($event)">
</ion-range>
</template>
<script>
import { IonItem, IonRange } from '@ionic/vue';
export default {
components: {
IonItem, IonRange
},
data() {
return {
percent: 0,
}
},
methods: {
changeRange(event) {
this.percent = event.detail.value.upper - event.detail.value.lower;
}
},
computed: {
percentLevel() {
if (this.percent >= 75) {
return 'success';
}
if (this.percent >= 50) {
return 'primary';
}
if (this.percent >= 25) {
return 'warning';
}
return 'danger';
}
}
}
</script>
The issue appears when the component is assigned a new color via the computed property. Then, both event.detail.value.upper and event.detail.value.upper are NaN despite the knobs remain on their position.
I’ve also tried using a method instead of a computed property, but the problem was still there.
Is this really a bug? Or is it anything I’m missing?
