Metro style Slider for java update (JMetro)


Given the latest feedback on the slider here’s an update:


JMetro Slider Light Theme


JMetro Slider – Dark Theme

Basically the vertical slider fill was misplaced, instead of starting from the bottom it was starting from the top.


Metro style Slider for java (JMetro)

One thing that’s missing from java 8 javafx slider is the fill that comes from the beginning of the slider to the thumb. You can see this in windows 8 as well as several other operating systems: ios 6 and 7, android, etc.

So by using only CSS, it is not possible to style the fill of the slider, to accomplish this you’d have to create your own skin to use with the slider. And that’s exactly what I did by creating the “FilledSliderSkin”.

With this skin set on the slider you can style its fill color, like so:

.slider .fill {
 -fx-background-color: #00828b;
 -fx-padding: 0.333333em; 
.slider .fill:hover {
 -fx-background-color: #219297;

You can use this skin to achieve the styles of ios 6, 7 and android sliders.

And here are the screenshots of the slider with a metro style:

Slider - Dark Theme

Slider – Dark Theme

Slider - Light Theme

Slider – Light Theme

Metro style ProgressBar for java (JMetro)

It’s been a while since my last post..

I’ve been doing some tweaks here and there but nothing too significant for a blog post. Unfortunately haven’t had much time to spend on side projects, hopefully I’ll have time to style a new control every other week or so..

So, this time it’s the ProgressBar (also some other tweaks to the existing styles). Enjoy!

ProgressBar (dark theme)

ProgressBar – Dark Theme

ProgressBar (light theme)

ProgressBar – Light Theme




Metro style Password Box for java (JMetro)

The metro style password field is very similar to the Text Box (Text Input Field) in its design. The look is very similar and it also has a button to the far right of the control.


Password Box with the password masked


This time instead of clearing the field, pressing the button will reveal the text you’ve just entered which is by default masked. This is useful, especially for long passwords and while entering the password through touch instead of a keyboard, which is less error prone.


Password Box with the password revealed


So here are the screenshots of the light and dark theme of the Password Box JMetro skin implementation:

Password Box - Light theme

Password Box – Light theme

Password Box - Dark theme

Password Box – Dark theme