css - 如何更改 RangeSlider (JavaFX) 中内部幻灯片的颜色？

Question

我正在尝试更改RangeSlider的 css

我在我的 FXML 文件中使用了这个 Maven 依赖项

    <dependency>
        <groupId>org.controlsfx</groupId>
        <artifactId>controlsfx</artifactId>
        <version>8.40.12</version>
    </dependency

它在 fxml 文件中的 id 是：

<RangeSlider fx:id="rangeSlider"

我将它注入控制器：

@FXML
private RangeSlider rangeSlider 

然后我设置一个 Id 用 CSS 改变它的外观：

@Override
public void initialize(URL url, ResourceBundle rb){

    rangeSlider.adjustHighValue(30);
    rangeSlider.setId("rangeSlider");
}

在 CSS 方面：

#rangeSlider .thumb {
    -fx-background-color: #2196f3;
}

#rangeSlider .track{
    -fx-background-color: #151928;
}

我不知道如何改变内部的蓝色

非常感谢任何帮助

Answer 1

负责拇指之间颜色的节点是一个StackPane样式类range-bar。-fx-background-color默认值为，-fx-focus-color但您可以覆盖此属性：

#rangeSlider .range-bar {
    -fx-background-color: red;
}

---

如果您想查看详细信息，请参阅RangeSliderSkin.initRangeBar代码和/或rangeslider.css.