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

Question

我正在尝试像这样构建自定义离子范围：

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

我正在使用 ionic 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);
}

这是我的结果：

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

insert ion-range value inside ion-range knob

ionic-framework

ionic3