Skip to main content

Bringing life to your (j)sliders

Posted by kirillcool on February 11, 2007 at 8:26 PM PST

One of the more interesting suggestions on the entries about translucent scroll bars came from Mikael Grev: an interesting addition would be if the scroll bars would be very thin or in some other way very subtle and only when the mouse is close/over they would animate to their full size. While this hasn't been implemented yet on the scroll bars, this functionality is now available on the sliders in the latest development drop of the next version of Substance (code-named Japan).

First, here's a screenshot of how sliders look like under the latest release:

Now, here's a screenshot of how sliders look like in the latest development drop:

Question 3 of the project FAQ states that while the binary backwards compatibility is of topmost importance (in fact, it was broken only in one release), the visual compatibility is less strictly enforced. As a matter of fact, one of the main reasons for the slider overhaul was the amount of vertical space that the horizontal sliders take, and after seeing a video demonstration of Yahoo Messenger for Vista, it was time to make some changes. In fact, a horizontal slider with no ticks and no labels is now 18 pixels high instead of 24, a horizontal slider with ticks and no labels is 21 pixels high instead of 32 and a full blown slider with ticks and labels is 38 pixels high instead of 49.

Another, and more interesting addition comes in the form of slider thumb animation on mouse pointer proximity. This can be seen in both the demonstration of Yahoo Messenger and in the following short clips (click the play button). Here are the new sliders under the Business Black Steel skin:

Here are the new sliders under the Raven Graphite skin:

Note how the slider thumb grows when the mouse is directly over it or in its vicinity and shrinks back (the essence of this functionality is apparently lost on some). The slider ticks are less obtrusive (translucent near the end). The focus ring properly fades in on focus acquiring and fades out on focus lost. In addition, the first and the last ticks are not painted since they're pretty much redundant.

To see the new sliders in action, click on the image below and go to the "Sliders" tab.

dmsmall.jpg Last but not least, i will be presenting a small session at Desktop Matters conference which will take place on March 9th in San Jose. If you're interested in one long all-desktop day, you're welcome to register and participate.

Related Topics >>