ControlsFX垂直RangeSlider滑块CSS样式问题：轨道颜色异常

问题分析 #

垂直方向的RangeSlider在ControlsFX中，默认CSS对轨道分段的样式逻辑和水平模式存在差异：high-thumb对应的轨道区域未正确继承-fx-focus-color配置，且垂直模式下的默认内置样式会优先生效，即便移除自定义的high-thumb样式，默认样式仍会覆盖预期效果。

解决方案 #

需要针对垂直模式的RangeSlider编写显式CSS规则，覆盖轨道分段和滑块的默认样式：

修改后的完整CSS代码：

.root{
  -fx-focus-color:#00a8ff;
}

/* 统一设置两个滑块的基础样式 */
.range-slider .low-thumb,
.range-slider .high-thumb {
  -fx-pref-height: 10;
  -fx-pref-width: 20;
  -fx-background-color: -fx-focus-color; /* 强制绑定自定义焦点色 */
}

/* 垂直模式下的轨道基础样式调整 */
.range-slider:vertical .track {
  -fx-pref-width: 6; /* 适配垂直布局的轨道宽度 */
}

/* 垂直模式下，两个滑块之间的轨道颜色（对应预期的蓝色区域） */
.range-slider:vertical .track .range-track {
  -fx-background-color: -fx-focus-color;
}

/* 垂直模式下，high-thumb上方的轨道颜色（修复原白色异常区域） */
.range-slider:vertical .track .track-high {
  -fx-background-color: derive(-fx-control-inner-background, -20%); /* 与默认轨道色调统一，也可自定义颜色 */
}

#hBoxWithRangeSlider{
  -fx-padding: 20 20 20 20;
  -fx-alignment: center;
}

关键说明 #

1. 显式为垂直模式的轨道（.range-slider:vertical .track）设置基础样式，避免布局错位；
2. 通过.range-track指定两个滑块之间的轨道颜色，确保与自定义-fx-focus-color一致；
3. 用.track-high修复high-thumb上方的轨道颜色，这里使用derive方法基于控件默认背景色调整色调，也可直接设置固定颜色；
4. 强制绑定滑块的背景色，避免ControlsFX默认垂直样式的干扰。

内容的提问来源于stack exchange，提问作者droid