如何在禁用状态下自定义离子范围?

Tom*_*lie 1 ionic-framework ionic4

有没有办法在禁用属性处于活动状态的情况下自定义离子范围?

用作ion-range视觉提示来显示用户在(订单)流程中的位置。用户将无法选择更改范围,因此disabled添加了该属性。此属性会覆盖所有自定义颜色 css。但我找不到disabledcss 来再次覆盖它以达到所需的结果。

这是自定义的CSS ion-range。次要颜色是下面看到的绿色。

在此输入图像描述

ion-range在用户无法控制滑块的情况下,我们能达到下面想要的结果吗?

<ion-range value="{{ range }}" min="0" max="2" color="secondary" disabled></ion-range>
Run Code Online (Sandbox Code Playgroud)

结果(具有禁用属性)

结果

期望的结果(没有残疾财产)

期望的结果

编辑

由于您无法更改禁用属性及其 CSS 变量,因此我们希望在用户不使用指针或触摸控制的情况下显示滑块。

Ira*_* JW 5

pointer-events:none阻止你与它互动

<ion-range style="pointer-events: none;"value="{{ range }}" min="0" max="2" color="secondary"></ion-range>
Run Code Online (Sandbox Code Playgroud)

:) 我的最终答案