Object is of type 'unknown' in ion-range dual knobs

any guideline to costume progress-bar as the picture below!
thanks in advance
Sans titre

i have tried this

<ion-item>
      <ion-range
        ref="rangeDualKnobs"
        dual-knobs="true"
        :min="21"
        :max="72"
        :step="3"
        :snaps="true"
      ></ion-range>
    </ion-item>
<script>
import { IonItem, IonLabel, IonList, IonRange } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonItem, IonLabel, IonList, IonRange },
  mounted() {
    this.$refs.rangeDualKnobs.value = { lower: 24, upper: 42 };
  },
});
</script>

but i have got this error

this.$refs.rangeDualKnobs.value “Object is of type ‘unknown’.Vetur(2571)”

i have set

“skipLibCheck”: true,

in

tsconfig.json
but i have still get this error !!