Home » Java » Desktop Java » Fluent Design Style Slider For Java, JavaFX

About 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.

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.

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

 

and many more ....

 

Receive Java & Developer job alerts in your Area

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

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

0 Comments
Inline Feedbacks
View all comments