Question

在我的特殊情况下，我正在使用Ionic中的范围滑块，即：

<ion-range min="5" max="180" step="5" formControlName="time"></ion-range>

但是我想将值{{ frmGoals.value.time }}直接添加到.range-knob的innerHTML上。

我希望这样做是为了在Ionic Framework中实现类似的东西，而不是Swift：https://github.com/Ramotion/fluid-slider。我唯一的猜测是要么在你滑动时操纵DOM来强制这个值 - 或者直接编辑组件HTML。

Answer 1

将以下样式添加到app.scss文件中：

  .range-md .range-pin{
    z-index: 5;
    transform: translate3d(0,28px,0) scale(.9);
  }
  .range-md .range-pin::before{
    display: none;
  }
  .range-md .range-knob-pressed .range-pin::before{
    display: inline-block;
  }

演示：https://stackblitz.com/edit/ionic-s4drjv

我可以编辑现有Ionic组件的html吗？

1 个答案: