Html 如何定制离子5中的离子范围？

我正在寻找一个解决方案，解决我当前的问题，即如何根据线框定制

离子范围。正如你在下面看到的，线框和我制作的实际作品之间的差异

线框设计


我的实际工作


在上面，您可以看到两者之间的区别。我的问题是，我能做些什么或解决方案来获得线框的实际外观。根据线框，当用户移动记号时，与记号对齐的标签也应为蓝色

这些是我的代码，我使用和生产我的实际工作

.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>

希望你能帮助我，使我能继续我的任务。非常感谢
您可以使用
（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>

您可以让
离子范围下的记号标记对范围内的选定值作出反应，如下所示

将侦听
ionChange
事件的函数添加到
。在组件类中使用该函数更新值。然后，您可以在模板中使用该值来指示应该突出显示哪个勾号（获取所选的
CSS类）

range.component.html
-用于单个范围（一个旋钮）




{{number}}



range.component.html
-用于双旋钮




{{number}}



range.component.ts
-组件文件

@组件({
选择器：“应用程序范围”，
样式URL:['./range.component.scss']
templateUrl:“./range.component.html”
})
导出类范围组件{
currentValue=0；
currentDualValues={
下限：25，
上限：50
};
//对单滑块使用此选项
setValue（$event:event）：无效{
this.currentValue=parseInt（$event.target作为HTMLInputElement）.value，10）；
}
//用于双滑块（双旋钮）
setDualValues（$event:event）：无效{
this.currentDualValues=JSON.parse（JSON.stringify（（$event.target作为HTMLInputElement.value））；
}
}

最后，在CSS中添加
.selected
类，以根据需要设置所选数字的样式，例如（您可能需要更改
ul.tick marks
的填充，以确保tick marks与范围选择器正确对齐）：

range.component.scss

.range容器{
显示器：flex；
弯曲方向：立柱；
宽度：100%；
.勾号{
显示器：flex；
证明内容：之间的空间；
列表样式：无；
保证金：0；
填充：0；
李{
颜色：var（--离子颜色暗）；
位置：相对位置；
&：：之前{
背景色：var（--离子色暗）；
内容：''；
显示：块；
高度：20px；
左：50%；
位置：绝对位置；
宽度：1px；
顶部：-20px；
}
&.选定{
颜色：var（--离子原色）；
&：：之前{
背景色：var（--离子原色）；
}
}
}
}
}

另请参阅此内容以供参考。
该解决方案将起作用。逻辑将像“显示隐藏概念”一样发挥作用。@Anuj否，它将只更改CSS类以突出显示选定的值。使用
ngClass
或
ngStyle
可以动态设置css样式。
 <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>

selectedValue;

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