离子：<ion-range> 的问题

Question

我正在尝试自定义离子量程旋钮（单旋钮或双旋钮）以显示当前量程值但无法成功。

按下旋钮时，我可以看到带有值的 Pin，但选择后，Pin 消失了。我尝试保持 Pin 不变，而不是仅在旋钮单击时显示，但也未能成功。

我还可以在范围栏的开头和结尾显示值。但我更喜欢在 Range Bar 的开始和结束位置显示上下范围值。所以这对我不起作用..

我正在研究如何自定义旋钮以显示下限值和上限值。

我当前的代码如下

          <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代码

<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 代码

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);
  }