离子 ： 问题<ion-range>

Question

我正在尝试自定义离子范围旋钮(单旋钮或双旋钮(以显示当前范围值，但未能成功。

当按下旋钮时，我可以看到带有值的Pin，但在选择后，Pin消失了。我试着保持Pin不变，而不是只在Knob点击时显示，但也没能成功。

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

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

我当前的代码如下

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