1

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?

|improve this question
  • 1
    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
  • 1
    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
2

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.

reference:
demosthenes.info/blog/757/Playing-With-The-HTML5-range-Slider-Input

|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 demosthenes.info 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 clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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