如何实现这类JavaFX Slider？是否需使用其他Node？

完全可以在JavaFX中实现你需要的这种Slider，不需要额外的Node类型，核心通过自定义CSS样式和基础类扩展就能完成，以下是具体实现思路：

• 基础样式定制（优先推荐）
  JavaFX的Slider本身支持通过CSS深度定制外观，你只需要针对轨道、滑块手柄等核心组件编写样式：

  • 轨道：修改.track的背景色、圆角、高度，以及选中填充部分（.track .fill）的样式
  • 滑块手柄：调整.thumb的形状、边框、阴影，甚至替换为自定义图形
  • 刻度与标签：如果需要显示类似图中的刻度或数值，可利用Slider.setTickLabelFormatter()自定义标签内容，或扩展Slider类添加文本节点

• 简单实现示例
  Java代码：

  import javafx.application.Application;
  import javafx.scene.Scene;
  import javafx.scene.control.Slider;
  import javafx.scene.layout.VBox;
  import javafx.stage.Stage;
  
  public class CustomSliderDemo extends Application {
      @Override
      public void start(Stage stage) {
          Slider slider = new Slider(0, 100, 50);
          slider.getStyleClass().add("custom-slider");
          
          VBox root = new VBox(slider);
          root.setPadding(new javafx.geometry.Insets(20));
          Scene scene = new Scene(root, 400, 100);
          scene.getStylesheets().add(getClass().getResource("custom-slider.css").toExternalForm());
          
          stage.setScene(scene);
          stage.show();
      }
  
      public static void main(String[] args) {
          launch(args);
      }
  }
  

  配套CSS文件（custom-slider.css）：

  .custom-slider .track {
      -fx-background-color: #e5e5e5;
      -fx-background-radius: 6;
      -fx-pref-height: 8px;
  }
  
  .custom-slider .track .fill {
      -fx-background-color: linear-gradient(to right, #2196F3, #4CAF50);
      -fx-background-radius: 6;
  }
  
  .custom-slider .thumb {
      -fx-background-color: white;
      -fx-background-radius: 12;
      -fx-border-color: #2196F3;
      -fx-border-width: 2px;
      -fx-padding: 10px;
      -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 5, 0, 0, 1);
  }
  

• 进阶定制方案
  如果需要更复杂的交互或视觉效果（比如特殊形状的轨道、动态变化的手柄），可以重写Slider的Skin类，自定义组件的绘制逻辑；或者直接基于Region类从头实现一个滑块组件，但这种方式开发成本较高，仅推荐在CSS无法满足需求时使用。

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