Ionic : Issue with

Question

I am trying to customise ion-range knob (single knob or dual knob) to display current range values but couldn't succeed.

When knob is pressed, I am able to see the Pin with values but after selecting, Pin is disappeared. I tried to keep the Pin constant instead of displaying only on Knob click but couldn't succeed that as well.

I am able to display the values at the start and end of the range bar also. But I prefer to display lower and upper range values in the start and end position of Range Bar. So this didn't worked for me..

I am looking on how to customise the knob to display the lower and upper values.

My Current code is as below

          <ion-range
             class="padding"
             [(ngModel)]="rangeValue"
             dualKnobs="true"
             pin="true"
             min="{{ rangeData.min }}"
             max="{{ rangeData.max }}"
             (ngModelChange)="onValueChange($event)"
           >
              <ion-note slot="start">{{ rangeData.min }}</ion-note>
              <ion-note slot="end">{{ rangeData.max }}</ion-note>
           </ion-range>

Answer 1

html code

<ion-range
      class="padding"
      [(ngModel)]="rangeValue"
      dualKnobs="true"
      pin="true"
      min="{{ rangeData.min }}"
      max="{{ rangeData.max }}"
      (ngModelChange)="onValueChange($event)"
    >
      <ion-note slot="start">{{ selectedData?.min || rangeData.min }}</ion-note>
      <ion-note slot="end">{{ selectedData?.max || rangeData.max }}</ion-note>
    </ion-range>

ts code

rangeData = {
    min: 0,
    max: 100,
  };

  selectedData = {
    min: 0,
    max: 100,
  };
  constructor() {}

  onValueChange(val: any) {
    this.selectedData.min = val.lower;
    this.selectedData.max = val.upper;
    console.log(this.selectedData);
  }