在离子范围旋钮内插入离子范围值

Question

我试图建立这样的自定义离子范围：

问题是，如何在离子范围旋钮内插入离子范围值？

我正在使用离子v3，这是我的代码

<ion-item>
<ion-label>step=100, snaps, </ion-label>
<ion-range min="0" max="10" step="1" snaps="true" color="secondary" 
[(ngModel)]="singleValue4">
</ion-range>

这是我的结果：

Answer 1

通过修改scss解决，这是我的代码

<ion-item>
<ion-label>step=100, snaps, </ion-label>
<ion-range min="0" max="10" step="1" snaps="true" pin="true" color="secondary" [(ngModel)]="singleValue4"></ion-range>

.range-md .range-pin {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform        : translate3d(0, 0, 0) scale(1);
    top: 10px;
    z-index: 999;
    background: transparent;
    transform: rotate(0);
}

.range-md .range-pin::before
{
    border-radius: 50% !important;
    transform: rotate(0);
}

这是我的结果：