css - ionic 范围最小和最大旋钮的离散颜色

Question

所以我正在尝试为我的 ionic 应用程序设置主题，以便 ionic 范围组件上的最小和最大旋钮具有离散颜色，就目前而言，我可以将名为“颜色”的单个 html 属性应用于选择器，但是属性将其应用于 slider 之间的空间。

<ion-range class="chartSlider" min="62" max="100" [(ngModel)]="slider"(ionChange)='goSlider()' **color="primary"** dualKnobs="true
">

当我拉起控制台时，看起来我可以针对每个单独的 slider ，它们每个都有一个单独的 div 类。

".range-knob-handle"
".range-knob-handle range-knob-max"

当我在控制台中将属性更改为其中任何一个时，这些属性会实时更改，颜色除外...

我觉得这与 Sass 变量有关，其中 ionic 为 ion-range 的单个“颜色”变量提供了 3 种变体。

我继续将“themes”下的 sass 变量文件夹中的这些更改为“black”作为测试，果然它们发生了变化，但变化同时应用于两个 slider 。

$range-ios-knob-background-color: #000;
$range-md-knob-background-color: #000;
$range-wp-knob-background-color: #000;

我怎样才能将这些变量附加到我选择的相应 div 标签的按钮上，而不是同时附加到这两个标签上？

Answer 1

这更像是一个 css 选择器技巧问题，我猜它并不是真正的 ionic 特定问题。

您可以在组件的相关 scss 文件中尝试类似这样的操作:

.range-knob-handle > .range-knob {
    background-color: #1257c7 !important
}
.range-knob-handle ~ .range-knob-handle > .range-knob {
    background-color: #e6780b !important
}

第一个 block 只会为您应用中的所有旋钮着色。第二个使用 css 选择器“到达”前一个旋钮同级之后的一个旋钮。

尝试一下。最有可能避免错误，您需要确保这样的 css 选择器不会干扰其他任何东西(特定于给定组件)