滑块与进度条JavaFX的混合

我想在滑块上点击ProgressBar。 并学习一定比例的赛道。 我会使用滑块而不是进度条，但它没有突出显示的轨道，直到拇指。

我需要创建类似于播放歌曲的音乐播放器中的进展，以及通过点击进度来寻找的可能性。

有人有提示我该怎么办？

Answer 1

这是另一种方法。 滑块和进度条真正的混合:)。 认识SlidoProgressBar！

public class SlidoProgressBarDemo extends Application { @Override public void start(Stage stage) { Group root = new Group(); Scene scene = new Scene(root); scene.getStylesheets().add(this.getClass().getResource("style.css").toExternalForm()); stage.setScene(scene); stage.setTitle("Progress Controls"); double sliderWidth = 200; final Slider slider = new Slider(); slider.setMin(0); slider.setMax(50); slider.setMinWidth(sliderWidth); slider.setMaxWidth(sliderWidth); final ProgressBar pb = new ProgressBar(0); pb.setMinWidth(sliderWidth); pb.setMaxWidth(sliderWidth); final ProgressIndicator pi = new ProgressIndicator(0); slider.valueProperty().addListener(new ChangeListener() { public void changed(ObservableValue ov, Number old_val, Number new_val) { pb.setProgress(new_val.doubleValue() / 50); pi.setProgress(new_val.doubleValue() / 50); } }); StackPane pane = new StackPane(); pane.getChildren().addAll(pb, slider); final HBox hb = new HBox(); hb.setSpacing(5); hb.setAlignment(Pos.CENTER); hb.getChildren().addAll(pane, pi); scene.setRoot(hb); stage.show(); } public static void main(String[] args) { launch(args); } } 

使用style.css：

 .slider .track { -fx-background-color:null; /* Hide the track */ -fx-background-insets: 1 0 -1 0, 0, 1; -fx-background-radius: 2.5, 2.5, 1.5; -fx-padding: 0.208333em; /* 2.5 */ } 

基本逻辑是将滑块和进度放入堆栈窗格。 给他们相同的宽度。 绑定它们的进度值。 隐藏滑块的轨迹。
输出：

Answer 2

我用代码解决了这个问题：

 progress.setOnMouseClicked(new EventHandler() { @Override public void handle(MouseEvent event) { if (event.getButton() == MouseButton.PRIMARY){ Bounds b1 = progress.getLayoutBounds(); double mouseX = event.getSceneX(); double percent = (((b1.getMinX() + mouseX ) * 100) / b1.getMaxX()); //correcting a percent, i don't know when it need percent -= 2; progress.setProgress((percent) / 100); //do something with progress in percent } } });