Possible bug in ion-range with Vue

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.

                    min="0" max="100"
                    dualKnobs="true" pin="true"
                    snaps="true" step="1"
                    ticks="false" value="0"

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';

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?

Looks like a bug. Can you create a bug report here?

Alright. Done! :ok_hand:

1 Like

Thanks! I will look into a fix.