Javascript 我可以编辑现有离子组件的html吗？

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

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

但是我想直接将值aka

{{{frmGoals.value.time}}

添加到

.range旋钮的innerHTML中

我希望这样做是为了在爱奥尼亚框架内实现类似的目标，而不是Swift:。我唯一的猜测是在滑动时操纵DOM强制输入此值，或者直接编辑组件HTML。
将以下样式添加到
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;
  }

演示：
您可以通过覆盖ion range组件的默认CSS来实现类似的功能。但是，由于范围旋钮值周围的圆圈具有固定的宽度和高度，因此该值应小于4位才能放入其中。感谢@99tharun的响应，但是，如果没有将值实际附加到
.range knob
CSS的innerHTML中，那么单靠CSS无法解决我的查询。该值已经存在于
.range pin
中。如果将其更改为
z-index
和
transform
，则该值将始终可见。完美。谢谢你，伙计！