RangeSlider 的 JavaFX ControlsFX CSS

Posted 2023-02-18

【中文标题】RangeSlider 的 JavaFX ControlsFX CSS

【英文标题】：JavaFX ControlsFX CSS for RangeSlider

【发布时间】：2015-04-27 14:17:52

【问题描述】：

我刚刚下载了 JavaFX ControlsFX 库，目前卡住了。我正在使用库中的一个自定义组件，称为 RangeSlider，但需要为 CSS 中的每个拇指操作样式。我到处寻找，但似乎找不到任何有用的东西。有没有办法做到这一点？我知道使用常规的 java Slider 组件，可以做到这一点：

.slider .thumb 
     // Style code here
 

但是当我对 RangeSlider 使用类似的东西时，没有任何效果。这是有道理的，因为有 2 个滑块，但我已经尝试了 100 种组合来确定子结构名称的含义。

任务：我正在尝试更改每个拇指图标，并且我也有兴趣更改在 2 个拇指之间绘制的颜色（当前为蓝色）。

希望这是非常明显的事情，谢谢！

【参考方案1】：

RangeSlider 的默认样式类是range-slider。您可以在rangeslider.css 文件（在controlsfx.jar 上）或repository 上找到所有样式规则。

如果你想改变拇指，那些是StackPane对象，你可以使用-fx-shape：

.range-slider .low-thumb 
    -fx-shape: "M2.998-0.07L3-1.499l2.998,4L3,6.501l-0.002-1.43l1.976-2.57L2.998-0.07z";

.range-slider .high-thumb 
    -fx-shape: "M5.997,5.072L5.995,6.501l-2.998-4l2.998-4l0.002,1.43l-1.976,2.57L5.997,5.072z";

这将改变范围栏的颜色：

.range-slider .range-bar 
    -fx-background-color: red;