Initial Concept

I think it was in 2004 when the problems with knobs as explained in (Not) Knobs 1 led me to think about ways to combine linear movement with variable precision: the fan-slider concept was born.

Fan-slider concept

Right on moving the mouse pointer over the slider the fan appears to the right. This is important for making the special functionality discoverable.

Clicking anywhere on the initial slider grabs the value, so there’s no value jump, but pointer and indicator movement are kept in sync. The whole slider is one target area and the user doesn’t need to aim at a small button.

Moving the pointer to the right means adjusting sensitivity, up and down is value change. Moving the pointer out on the other side makes the fan flip over.

GTK / Phat

I worked in cooperation with Pete Bessman on the design of a GTK+ version, which he implemented as part of the Phat widget collection. The audio sampler Specimen was the first application to use fan-sliders.

Specimen Fan-sliders


When moved over the slider the mouse pointer changes to the up/down arrow to indicate the main functionality. When the mouse button is pressed, small arrows to the sides appear to give a hint at the fan functionality. The fan only appears on moving the pointer outside the slider area. This way the fan’s edge marks the current position on that axis, an additional marker line like on the original design is void.

Following Pete’s proposal the mouse cursor disappears as long as the mouse button is held down. The value indicating line and the fan take its place. After the operation it appears right where the button was pressed down. This way there’s no problem with leaving the screen: with a kept visible cursor it either wouldn’t be possible to leave the screen (part of the fan outside), or the pointer would have to jump back on screen afterwards, which might cause confusion.

Holding down ctrl while manipulating the slider freezes the precision axis, so only the value can be changed. Holding down shift freezes the value axis, so that you can scale the fan up without worying about unintended value change.

Problems of the current Implementation

Sadly this implementation is plagued by flickering and a lack of anti-aliasing and transparency. My hope is that these issues can be resolved now thanks to compositing, Cairo or whatever it may take exactly🙂

Another issue: hiding the mouse pointer and making it appear back at the start doesn’t work with tablets (absolute mode). To still allow making full use of a fan that leaves the screen, the best option might be to detach and “scroll” the whole widget inwards as the pointer approaches the edge.

Another Slider

Recently I designed a new fader for Ardour 2.0.

Ardour Sliders

It has no fans (it’s long enough), but otherwise behaves like a fan-slider as it has no button to offer one large target area instead. With early designs, there were some concerns of it looking too much like a meter, so I came up with a relief as hint that the whole area allows dragging.

Blender Sliders

Blender has sliders that allow dragging everywhere, too. They have what looks like a button as indicator, though. I witnessed that people thought they had to aim at the indicator for dragging until being told otherwise several times. I noticed myself aiming at the indicator even though I know of this (similar is true for check boxes). My conclusion is that there should be nothing on the slider looking like a special area if it isn’t.

New Style

Now what could or should modernized fan-sliders look like?


After trying a number of relief variations, I picked the 2nd. Below Nr. 8: Showing the fans on dragging while the pointer is still over the slider to make the user aware of the special functionality and to invite him to use it. Transparency allows the user to still see everything else and makes comparing slider values much easier. Last: a version for parameters with a neutral center. The triangle can serve as Reset button.

About thorwil
I'm a designer from Germany. My main interests are visual and interaction design, free/open-source software and (electronic) music.

7 Responses to Fan-sliders

  1. Gasten says:

    The Fan-sliders are very nice to work with. Hope more projects will incorporate them. We need a good evolution in the gui-area.

  2. Bennyp says:

    Very, very interesting.

    Here’s an idea, instead of a triangular fan growing out of the side of the slider, a transparent replica of the slider could pop over, changing size as the user moves their cursor along the Y axis and adjusting the value as they move the cursor along X axis.

    Very interesting ideas.

  3. thorwil says:

    Bennyp: I considered such a slider before I had the idea of a fan. The fan gives a better idea of how movement along the precision axis is interpreted. The current mouse position has direct and obvious meaning.

  4. You’re right that compositing should provide a fix. The long and short of the jitter problem is that the clipmask — what is used to define what parts of a window are visible and what parts are translucent — can be resized without any jitter. But, if you move it, things get ugly. And since resize operations grow the clipmask down and to the right, the fans work fine if you drag down or to the right. But, if you drag up or to the left, the clipmaks must be repositioned, and everything starts to look like ass.

    With compositing it should be much easier and fluid, especially with hardware acceleration, since the technology is designed to handle these sorts of dynamic applications.

  5. mescalinum says:

    why fanslider?
    in puredata there are also sliders (and numberboxes).

    if you need to do precise tweaking of the values, you simply hold SHIFT…. the appearance of the slider does not change, but you are still able to fine tweak the value

  6. thorwil says:

    mescalinum: because with fan-sliders you can vary the movement-to-value-change ratio. It’s not just 2 levels of precision. Also this functionality is discoverable, while you have to know about the Shift thing.

  7. I just jumped over from the Ayatana Thread and all i can say is, this is another obvious case of “Why haven’t we been doing it like this for Ages?”

%d bloggers like this: