Possible bug in ion-range

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.

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?

1 post - 1 participant

Read full topic