Cannot set initial value for ion-range with dualKnobs

[WayneDanielSinclair]

 <ion-range :value="price" @ionChange="rangeChange" color="secondary" dual-knobs="true" max="10" min="1" step="1"></ion-range>
.
.
.
data() {
    return {
      price: {
        lower: 3,
        upper: 7
      }
    }
  }

I would expect this code to set the knobs to 3 and 7, but both knobs are at the minimum end

[michaeltintiuc]

Hey @WayneDanielSinclair Ineed it doesn't work as specified in the docs, in fact I have tested this with React as well and observed the same behaviour.

Here's a quick fix to get you going:

<template>
  <ion-range ref="range" dual-knobs min="1" max="100" step="1" snaps="true"></ion-range>
</template>

<script>
export default {
  mounted() {
    this.$refs.range.value = { lower: 20, upper: 60 };
  },
}
</script>

After debugging it int he browser I've notice that when you pass an object to the value attribute, it would return NaN, yet setting it after works just fine.

[WayneDanielSinclair]

Ok, thanks for the workaround.

[michaeltintiuc]

@WayneDanielSinclair I've submitted a bug report to Ionic as it impact React as well.

[michaeltintiuc]

@WayneDanielSinclair After checking with Ionic folks, looks like this is the way to go, you can not set it directly via the value attribute, I'll update the usage docs.

Perhaps adding new attributes to handle this would be better, but it's a feature request, feel free to submit it to Ionic.