离子范围的最小和最大旋钮的离散颜色

Question

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

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

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

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

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

我觉得这与 Sass 变量有关，离子为单个“颜色”变量提供 3 种变体，用于离子范围。

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

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

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

Answer 1

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

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

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

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

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