html - 如何在 ionic 5 中自定义 ionic 范围？

Question

我正在寻找解决我当前问题的解决方案，即如何根据线框自定义 ion-range。正如您在下面看到的线框和我制作的实际作品之间的区别。

线框设​​计

我的实际工作

从上图可以看出两者的区别。我的问题是，是否有任何方法或解决方案可以让我获得线框的实际外观。根据线框，当用户移动刻度时，与刻度对齐的标签也应为蓝色。

这些是我在实际工作中使用并生成的代码。

.html

   <div class="slidecontainer">
    <ion-range 
        class="range-position"
        min="5" 
        max="100" 
        dualknobs="true"
        pin="false"
        snaps="true"
        ticks="false"
        value="0" 
        snaps color="primary"
        list='tickmarks'>
    </ion-range>

    <div id="tickmarks" class="tick-position">
        <p>5</p>
        <p>10</p>
        <p>25</p>
        <p>50</p>
        <p>75</p>
        <p>100</p>
    </div>
</div>

.scss

// Customize Slider
   #tickmarks {
   display: flex;
   justify-content: space-between;
   padding: 0 25px;
   }

   #tickmarks p {
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;
    width: 1px;
    background: #ccd3da;
    height: 10px;
    line-height: 40px;
    margin: 0 0 20px 0;
    font-family: 'Archivo';
    font-size: 12px;
   }

希望您能提供帮助，以便我能够继续完成我的任务。非常感谢

Answer 1

您可以使用 (ionChange) 事件使其工作。

 <ion-range 
    class="range-position"
    min="5" 
    max="100" 
    dualknobs="true"
    pin="false"
    snaps="true"
    ticks="false"
    value="0"
    step="25"  // use step attribute for sure event value
    snaps color="primary"
    list='tickmarks'
    (ionChange)="changeFunction($event)">
</ion-range>
<div id="tickmarks" class="tick-position">
    <p [ngClass]="selectedValue == 0 ? 'active' : null">5</p>
    <p [ngClass]="selectedValue == 25 ? 'active' : null">25</p>
    <p [ngClass]="selectedValue == 50 ? 'active' : null">50</p>
    <p [ngClass]="selectedValue == 75 ? 'active' : null">75</p>
    <p [ngClass]="selectedValue == 100 ? 'active' : null">100</p>
</div>

.ts

selectedValue;

changeFunction($event){
   this.selectedValue =  $event.detail.value;
}