Question

我有一个离子2范围滑块组件，我想要做的是在滑块上设置渐变颜色。所以基本上从0到10，其中0是灰色，10是红色。如何使用颜色渐变设置范围滑块？

这是我的范围滑块：

  <ion-item text-wrap>
    <ion-label stacked>Beperking: </ion-label><ion-badge item-right color="secondary">{{ Beperking }}</ion-badge>
    <ion-range min="0" max="10" [(ngModel)]="Beperking" color="secondary" pin="true">
      <ion-label range-left>0</ion-label>
      <ion-label range-right>10</ion-label>
    </ion-range>
  </ion-item>

如果颜色高于某个值，我该如何更改？

Answer 1

当数字变化时触发方法：

this.$cyclingItem = this.$container.find('div.item').first();    
this.$cyclingItem.slideUp(slideDelay, function() {
  this.$cyclingItem.hide();
  this.$container.append(this.$cyclingItem);
  this.$cyclingItem.fadeIn(function() {
    this.$cyclingItem = null;
  }.bind(this));
}.bind(this));

那么你的方法应该只是将返回的比例映射到特定的颜色，这里有一个很好的例子： https://codepen.io/zhipeng/pen/gBdDE

Answer 2

为此，您需要将滑块中的更改映射到阀门，并在更改事件时触发一个函数，该函数将更改目标组件的样式，或者您可以将其嵌套在[]属性标记中以使用数据绑定来生成效果。

离子2 - 范围滑块

2 个答案: