Category Archives: Windows 8

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 – Light Theme

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 – Light Theme

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 – Dark theme