User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm working on an interface to control a variable-brightness LED. The obvious choice to me is to use something like a slider. The LED can be adjusted within the GUI or externally, so I need to allow the user to change to setting, and also display the current setting, so it seems like a slider is not the ideal in that regard.

What are some approaches that have been used to display input and output at the same time in a slider format? What would be a good way of approaching this problem?

share|improve this question
Do you really need to see the current position, or just cater for the possibility that it could be set from another interface? Is it relevant to show the current position at all, or is it just the ability to alter the brightness that is needed? – Babossa Jun 2 '14 at 21:28
Why not bind the slider position to the actual value, then the user can change the value and see it change immediately in GUI when changed via other (non graphical) UI? – Danny Varod Jun 3 '14 at 0:52
If you look at some of the audio controls, they also use the slider with the control bound to the current value. I think the analogy is similar enough that users will understand. You can also reference mobile phone light controls. – Michael Lai Jun 3 '14 at 22:33

i think this is the textbook case for they the <output element was implemented in html5. i've seen a few examples styled as knobs, which shows both display input and output: the knob has a marking in one position, showing the user where the input is at all times; as it turns on the dial, the output element is used to illuminate the selected volume at the moment, in the form of lights and shading altering between icons embedded into the hardware (typically).
the vanilla example of using <input type="range" /> and <output> in tandem is a lesser version of the knob example:
style the <input type="range" /> into a knob, while styling the Eoutput> element to appear as a digital display, dynamically updating per user input.


share|improve this answer
yes, it seems like you could put a hash/tick mark where the current setting is (or a percentage value to the side like in the example on the reference page) .. you could even show a few of the past hash marks and shade them differently so users had a "past 3 spots" they could see – sova Feb 20 '15 at 16:02

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.