Introducing the Slider control

May 17

Slider controlThe slider as a control interface can be found on a number of appliances within the home. Maybe more so within older analogue interfaces such as a television volume control or Hi-fi graphic equaliser.

All in all the sliders prime use is to control a range, where the position of the slider defines the control.

In this article we look at common uses of the 'Slider' within the home, the computer interface, web and Mobile UI.

Slider controls around the home

The most common use that spring-to-mind are from older appliances, these have mainly been replaced by digital alternatives.

Old TV (1980's)
Control volume, contrast and brightness
Select toasting time for the appropriate bread thickness
Retro Hi-fi graphic equalizer
Used to control frequency levels
Light dimmer switch
Adjust the brightness

Slider controls within computer operating systems

Here we compare slider controls used on Windows XP, Vista, Apple Mac OSX, and the native Java user interface

Audio Mixer - Windows XP
Audio Mixer - Windows
Audio controls - Mac OSX
Audio controls - Native Java UI

Slider controls within web design

It has really only been since the introduction of Web 2.0 and AJAX that the Slider control has been successfully implemented within web design.

Not only is it technically possible to create such an interface but the use of implementation enriches the user experience. Just as with the other slider controls shown above, when the user adjusts the control an immediate response is expected, and it is this response that can now be achieved through AJAX.

Popular and successful implementations of the slider are largely based around filtering search results.

Kayak - Find cheaper flights
Used to filter airline departure\return times - Search for the right diamond
Used to search for diamonds on a whole range of criteria

Other popular uses include controlling the scale of a map and selecting the time line of a video.

Google maps
Used to Zoom in and out of a map
Controlling the time line of a video

Mobile & handset UI

Lastly we can see the slider control in use within both mobile UI and handset design.

The mobile UI is designed using UIQ, a stylus allows the user to control the slider directly from the handset screen.

Sony Ericsson UIQ
Graphical equalizer and volume control
T-mobile MDA2
Volume control slider on the side of the handset


The slider interface as a content filter - Tag Cloud Filter

Update: 2012

Chris Norström looks at the slider UI pattern for selecting multiple choice options - Multiple choice slider UI/

Filed under:
UI Design Patterns
Posted by:
James Griffin
May 17, 2007