I've got a web app with two related UIs for adjusting a value. The first allows the user to add or subtract up to 100% of the amount. It's for an estimate, so rough ranges (e.g. every 10%) would be fine, or a continuous selection would work as well. The second selects a percentage of the available range in discrete steps e.g. 100%, 75%, 50%, 25%, 10%.

I've thought of two main UIs -- select boxes:

select box adjustment UI

and sliders:

slider adjustment UI

Note: in the range slider, the upper value will be locked to 100%. Also, FWIW, there will be several rows of these, if it makes a difference:

enter image description here

It seems to me that the advantages of the select boxes are that they're native controls, which always brings a certain richness of interaction, and they're perhaps a bit more explicit in their text. The sliders, OTOH provide a visual indicator, as well as a numeric one. Any other pros and cons of each design? Any other designs I should consider?

  • The selection of a range shows nicely that the text 'Top 50%' makes is more explizit/clear, and can help to put the whole selection more into context. I wonder if some dynamically changing text (e.g.) underneath the slider would help to add the same level context? Commented Sep 23, 2012 at 12:35
  • 1
    If you are going to lock the 100% of the range slider in place, then I suggest you don't use a range slider at all. The handle suggests that you can move it, and it will be frustrating if you can't. Simply color that side of the slider as you are doing now, but don't display the handle at 100%.
    – André
    Commented Sep 24, 2012 at 7:21
  • @Fresheyeball: as it says above, "web app"
    – sprugman
    Commented Sep 24, 2012 at 15:12
  • @sprugman sorry. Just desktop web app, or mobile web app, or both? Commented Sep 24, 2012 at 15:26
  • @Fresheyeball the target is desktop
    – sprugman
    Commented Sep 24, 2012 at 15:29

1 Answer 1


Another option would be radios.
If values are ballpark, then a set of radios associated to reasonable values would let your users pick their choices with single clicks.
If the budget allows, I'd create a control made of a stripe of radios with a js function to somehow highlight all the radios up to and including the selected one.
This would match single-click selection with visual feedback.
Notice that the radios need not be visible. With a bit of js I hide them, showing only their labels. As clicking the related label trips the button, you don't need it to be visible. It will only show in browsers unable to run your js, and in screen readers.

  • @sprugman: I created this fiddle to illustrate my suggestion: jsfiddle.net/VqR63/2 The idea is to make the usr do the less possible. compare with opening a dropdown and choosing, for example. Or with clicking a small target (slider handle) and precisely dragging it.
    – Juan Lanus
    Commented Sep 24, 2012 at 13:11
  • now jsfiddle.net/VqR63/5
    – Juan Lanus
    Commented Sep 24, 2012 at 13:42
  • Not sure I want to introduce a brand new control type, but +1 for the suggestion and the fiddle, for sure.
    – sprugman
    Commented Sep 24, 2012 at 15:13
  • (I like the way this degrades, as well.)
    – sprugman
    Commented Sep 24, 2012 at 15:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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