The 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
- Toaster
- 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
- Amazon.com - 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
- YouTube
- 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
Related
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
- HCI
- Interaction design
- Kayak
- Mobile UI
- OSX
- Slider
- T-Mobile
- UI design
- UIQ
- Vista
- Widgets
- XP
- YouTube
- Posted by:
- James Griffin
- Dated:
- May 17, 2007
- Tweet