ionic-framework - Ionic2, ion-range 自定义的range pin内容

Question

我正在使用 ion-range与 pin和 steps .我在范围引脚中获取当前值，但我想在它旁边添加/附加一些文本。

到目前为止，在 ionic API 和 docs 中，我没有找到修改范围引脚内容的方法，所以我正在考虑通过代码附加一个跨度，但到目前为止我知道使用 .append() 来自 jQuery 的函数。
范围引脚的 html 是:

<div class="range-pin" role="presentation">1</div>

所以我想展示它:

<div class="range-pin" role="presentation">1 item</div>

Answer 1

我知道现在有点晚了，但如果有人遇到这个问题，我找到了以下解决方案:

HTML

<ion-range id="euroRange" debounce="250" pin="true" min="0" max="50" (ionChange)="formDidUpdate()" [(ngModel)]="price" color="secondary"></ion-range>

看看我是如何向我的 ion-range 元素添加一个名为 euroRange 的 id 的。

CSS

#euroRange {
    .range-pin:after {
        content: " €";
    }
}

在 euroRage id 内，我添加了 .range-pin:after 这意味着我指定的任何内容都应该在 pin 的正常内容之后直接完成。

对于内容，我添加了一个空格和 € 符号。

这里是
result .