Desktop Java

Fluent Design Style Slider For Java, JavaFX

JMetro’s Java, JavaFX theme version has just been bumped up to version 4.2.  This version brings a new style to the Slider control. Besides this, you can also now see a popup showing you the current value of the Slider.

New Slider style

Following is the old JMetro Slider style:

Slider OLD JMetro light theme
Slider OLD JMetro light theme

Slider OLD JMetro dark theme
Slider OLD JMetro dark theme

For this theme I had to create a new skin. This is because you can’t style the filling that goes from the beginning of the Slider track to the point where the thumb is. In version 4.2 of JMetro I’ve further enhanced this skin to add a new feature. I’ll discuss this feature next.

First, I’d like to show the new Slider style in action:

Slider NEW JMetro light theme
Slider NEW JMetro light theme

Slider NEW JMetro dark style
Slider NEW JMetro dark style

As you can see the Slider colors and overall style have changed. You’ll also notice the new feature I’ve mentioned. Whenever the user interacts with the Slider to change its value a popup appears to show exactly which value the Slider has. This is useful whenever you need to show an interface that allows for a more precise tuning. By showing a popup the user will know exactly the current Slider value while manipulating it.

This feature is on by default but can be turned off through the -show-value-on-interaction property. The following snippet shows how this is configured in JMetro by default:

.slider {
  -show-value-on-interaction: true;

To turn this feature off, all you need to do is add a stylesheet after the call to applyTheme(...) of JMetro class, with the following definition:

.slider {
  -show-value-on-interaction: false;

Or you can do it on a case by case situation by targeting the specific Slider, and setting its -show-value-on-interaction property to false.

Wrapping Up

Version 4.2 has just been released. This version brings a new style to the Slider control and enhances the previous Slider skin. It adds a new feature that allows to show the current modified Slider value through a popup.

You can check out the previous JMetro style Slider post if you want a bit more background information on the new Skin.

I’m planning on creating a new library that will have new enhanced skins like this one and other general enhancements. My understanding is that these enhancements are not only valuable for JMetro. So, I’ll make them available for others to use on different contexts. JMetro will then depend on this new library.

I’m not a fan of the rounded corners of the Slider thumb. I somehow feel they are a bit too rounded. Because of this, I may come up with an alternative style in another JMetro version and allow you to choose between the two.

As usual you can check out the JMetro Java, JavaFX theme page for detailed information on JMetro. I’ll try to update it in the coming days.

In the next update I plan to create a new style for the Button control, with an added animation whenever it is clicked.

Stay tuned, follow me on twitter and subscribe to this blog.

Published on Java Code Geeks with permission by Pedro Duque Vieira, partner at our JCG program. See the original article here: Fluent Design Style Slider For Java, JavaFX

Opinions expressed by System Code Geeks contributors are their own.

Pedro Duque Vieira

JavaFX and Swing, Freelancer and Consultant specialized in creating User Interfaces. Has been working as a front end consultant and has been developing web, native and cross platform since 2006. Holder of a master degree in Computer Science, he's permanently studying and taking courses in User Interface Design and User Experience. Owner of the software company Pixel Duke.
Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Inline Feedbacks
View all comments
Back to top button