Question

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

到目前为止在离子API和docs中我没有找到修改范围引脚内容的方法，所以我想通过代码附加一个span，但到目前为止我知道要使用.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 ，这意味着我指定的任何内容都应该在引脚的正常内容之后直接完成。

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

这是 result

Answer 2

这是我的解决方案。

注意：我把它放在ionViewDidEnter中。

this._elementRef.nativeElement
  .querySelector('.range-knob-handle')
  .addEventListener('pointermove', function () {
    const value = this.getAttribute('aria-valuenow');
    this.querySelector('.range-pin').textContent = `${value} hours`;
  });

因此，主要的是const值是在范围上选择的值。之后，您可以随意使用它，只需设置范围引脚的textContent即可修复文本。

Answer 3

请查看官方文件https://ionicframework.com/docs/api/components/range/Range/

您需要更改哪种内容？您可以使用下面给出的默认参数;

debounce（number）：等待触发的持续时间（以毫秒为单位）每次更改范围值后的ionChange事件。默认为0.
dualKnobs（boolean）：显示两个旋钮。默认为false。
max（number）：范围的最大整数值。默认为100。
min（number）：范围的最小整数值。默认为0.
pin（boolean）：如果为true，则按下该旋钮时会显示一个带整数值的引脚。默认为false。
snaps（boolean）：如果为true，则旋钮会根据step属性值捕捉到均匀间隔的刻度标记。默认为false。
step（number）：指定值粒度。默认为1。

您可以更改背景颜色，边框，图钉颜色，宽度，字体大小，填充等... Example

Ionic2，离子范围定制引脚的内容

3 个答案: