Ionic v3: при использовании ионного диапазона ионный значок не отображается

Question

Я использую ионный диапазон в моем коде с двумя значками в начале и конце.Но эти две иконки не показывались - показывался только диапазон.Я просмотрел их официальный документ (https://ionicframework.com/docs/api/range) и вот мой код (я в основном копирую их код):

<ion-item>
  <ion-range min="0" max="5" steps="1" pin="true" snaps="true" formControlName="rating"></ion-range>
  <ion-icon slot="start" size="small" name="sad"></ion-icon>
  <ion-icon slot="end" name="happy" ></ion-icon>
</ion-item>

Ионный документ иногда отстой, и мне действительно нужен кто-то, чтобы выручить меня.

Answer 1

Вам необходимо добавить значки внутри тега ion-range и для левого значка добавить атрибут range-left к тегу ion-icon, а для правого значка добавить атрибут range-right, как показано ниже.

  <ion-item>
    <ion-range min="0" max="5" steps="1" pin="true" snaps="true" formControlName="rating">
      <ion-icon range-left size="small" name="sad"></ion-icon>
      <ion-icon range-right name="happy" ></ion-icon>
    </ion-range>
  </ion-item>

StackBlitz