Java Fx Ui 组件 Slider 自定义控件 Slider（滑块）

java FX 滑块 Slider 原生的滑动后没有颜色 甚至thumb比较简单 先看下Slider的组成

本文章主要更改Track 和Thumb

public class CustomSlider  extends Application {@Overridepublic void start(Stage stage) throws Exception {BorderPane mainPane = new BorderPane();mainPane.setPadding(new Insets(15));mainPane.setCenter(new ColorSlider());Scene scene = new Scene(mainPane, 250, 400);stage.setScene(scene);stage.show();}public class ColorSlider extends StackPane {public ColorSlider() {getStylesheets().add(this.getClass().getResource("testcss.css").toExternalForm());Slider slider = new Slider();slider.setId("color-slider");Rectangle progressRec = new Rectangle();progressRec.heightProperty().bind(slider.heightProperty().subtract(7));progressRec.widthProperty().bind(slider.widthProperty());progressRec.setFill(Color.web("#c3c3c3"));progressRec.setArcHeight(15);progressRec.setArcWidth(15);slider.valueProperty().addListener(new ChangeListener<Number>() {@Overridepublic void changed(ObservableValue<? extends Number> ov, Number old_val, Number new_val) {// Using linear gradient we can fill two colors to show the progress// the new_val gets values between 0 - 100String style = String.format("-fx-fill: linear-gradient(to right, #1979ca %d%%, #c3c3c3 %d%%);",new_val.intValue(), new_val.intValue());// set the StyleprogressRec.setStyle(style);}});getChildren().addAll(progressRec, slider);}}
}

ColorSlider extends StackPane 然后去加载css样式，下面是我的css样式

看下运行效果图：

这样就完成了并不是很难，有什么问题可以留言。

我在推荐个网站：http://www.javafxchina.net/blog/2015/04/doc03_slider/