版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34651026/article/details/86502835
java FX 滑块 Slider 原生的滑动后没有颜色 甚至thumb比较简单 先看下Slider的组成
本文章主要更改Track 和Thumb
public class CustomSlider extends Application { @Override public 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>() { @Override public 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 - 100 String style = String.format("-fx-fill: linear-gradient(to right, #1979ca %d%%, #c3c3c3 %d%%);", new_val.intValue(), new_val.intValue()); // set the Style progressRec.setStyle(style); } }); getChildren().addAll(progressRec, slider); } } }
ColorSlider extends StackPane 然后去加载css样式,下面是我的css样式我在推荐个网站:http://www.javafxchina.net/blog/2015/04/doc03_slider/