Pranay Sethi's profile

Quick Prototyping - Slider

I have a gripe against common implementations of sliders on the web.
 
The Problem -
Consider an audio equalizer which typically has vertical sliders for several audio frequencies. They are all set to a pre-defined value. You carefully alter the value for each one of them to your liking. While fine-tuning, you decide that for one of the frequencies, you want to reset the slider to it's default value. Unfortunately, there's no indication of what the default value was. You can either reset all the sliders together, or try and remember where the default for that specific slider was.
 
 
A typical Audio EQ control. Source: http://www.uiparade.com/portfolio/eq-sliders/
In summary, slider controls often do not indicate their default value. Sometimes, an additional checkbox or button is added to reset the slider to default, but that adds clutter to the UI. Imagine adding a 'reset to default' button for every slider in that EQ design, or for that matter, to a typical web form.
 
Solution -
In order to solve this, I came up with a simple way of indicating default position of the slider using a distinct color marker on the slider bar. Whenever the slider knob is at default position, it is indicated by a subtle change of stroke color.
 
Try out the Axure prototype, or watch the video below -
Quick Prototyping - Slider
Published:

Quick Prototyping - Slider

I used Axure to design a prototype for a slider, that elegantly fixes a problem.

Published: