JAVAFX 2.0 How can I change the slider icon in the slider to an image?

Question

I want to change the icon to my image, I looked through the CSS reference manual, but I cannot find anything relevant. Is it possible? It doesn't matter if it uses CSS or declaratively from the main JavaFX script.

Answer 1

Take a look at the sample code and images of how the user slider is rendered in this AudioPlayer .

In addition, the JFXtras library has many sensors if you just need feedback, not an interactive control.

Here is a css example using a selector that is indicated by an invariant answer. Note that I needed to add the -fx-padding specification in half the size of the images to display the entire image.

/** slider.css place in same directory as SliderCss.java ensure build system copies the css file to the build output path */ .slider .thumb { -fx-background-image :url("http://icons.iconarchive.com/icons/double-j-design/diagram-free/128/piggy-bank-icon.png"); -fx-padding: 64; } /* Icon license: creative commons with attribution: http://www.doublejdesign.co.uk/products-page/icons/diagram */ 

Application example:

 import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.*; import javafx.scene.layout.*; import javafx.stage.Stage; public class SliderCss extends Application { public static void main(String[] args) { launch(args); } @Override public void start(Stage stage) throws Exception { VBox layout = new VBox(); layout.setStyle("-fx-background-color: cornsilk; -fx-padding: 10px;"); layout.getChildren().setAll(new Slider()); layout.getStylesheets().add(getClass().getResource("slider.css").toExternalForm()); stage.setScene(new Scene(layout)); stage.show(); } } 

Program output example:

Answer 2

you can change slider pointer using css

 .slider .thumb{ -fx-background-image :url("your image"); ...// more customization } 

Answer 3

If you want to remove the background color of the thumb and only have an image (translucent, such as round buttons), then you should also -fx-background-color: transparent; if you don't have a background

 .slider .thumb { -fx-background-image :url("sider-round-thumb-image.png"); -fx-padding: 16; /* My thumb image is 33x33 pixels,so padding is half */ -fx-pref-height: 28; -fx-pref-width: 28; -fx-background-color:transparent; }