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 control JMetro light theme, Java, JavaFX theme, inspired by Microsoft Metro (now named Fluent Design)

Slider OLD JMetro light theme

Slider control JMetro dark theme, Java, JavaFX theme, inspired by Microsoft Metro (now named Fluent Design)

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 control JMetro light theme, Java, JavaFX theme, inspired by Microsoft Fluent Design System (previously named Metro)

Slider NEW JMetro light theme

Slider control JMetro dark theme, Java, JavaFX theme, inspired by Microsoft Fluent Design System (previously named Metro)

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.

Leave a Reply