0

The aim is to offer an input using a bandwidth range-like slider field, that can make the selected option clear.

Option A: only show the selected option, to encourage the user to use the input and select an option.

range slider with only the selected option visible

Option B: show all options from the start and be more transparent with the user.

range slider with all options visible

2 Answers 2

1

Option B

The first option is a mystery. Why would anyone click randomly anywhere on a line? Furthermore, the ranges are not proportional, making it even more confusing. Ranges are meant for increasing values in a linear or logarithmic way.

From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

input elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value. The precise value, however, is not considered important. This is typically represented using a slider or dial control rather than a text entry box like the number input type.

Because this kind of widget is imprecise, it should only be used if the control's exact value isn't important.

However, in this case, you're using this element as an option selector, not a range. Therefore, I recommend using a select element, which is appropriate for your purpose and is also accessible. Using a range slider in this manner is equivalent to using words like "cake, car, cauliflower, cow." The relationship is not linear but random.

If you insist on using a range slider, I would recommend Option B, and as Mike M suggested, if you have granularity, add an input box, even though it won't be proportional.

1

Combine both, and if you have more fine grained values, add an input box.

When users are landing on your control, they should know the available range right from the start. Don't make them guess the acceptable bounds (and current value) of a range.

  • Use the tooltip from Option A as they adjust, so it gives some visual feedback. This is very useful if this also appears in mobile, where the users' finger is blocking the value below the slider.
  • Having some buckets like Option B give them an immediate sense of what's possible.
  • If you have fine grained ranges, you can pop an input box to the right to save them from fiddling around trying to get the exact value:

enter image description here

Your Answer

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

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