3

I have a HTML form where the user needs to select two numbers. I decided to do this with the help of sliders (mainly because the input is used to compute a third value and I want to avoid that the user chooses a number, sees the computation, then selects the input field, deletes the old input, enters new one, ...).

But I am not really sure how to present the selected value of the slider to the user. What I came up with is just read-only text fields above/below the slider. Should I go with the above/below combination. Also, should the text field and the slider be 'glued' together or rather not? Please find a screenshot attached.slider-text-field-above-below

Improve this question

1 Answer 1

Reset to default
3

I don't think it'll make a huge difference whether positioning the value on top or bottom. Instead of worrying about that, invest your time to make sure the value looks connected to the slider's handle.

My recommendation: Design an input just wide enough to handle the highest value and attach it to the slider so that it's moving with it. This should clarify the connection between them. And if you don't set the input on read only, the user is able to enter the value directly if he wants to.

Here's an example I've build for an client's project:

enter image description here

Improve this answer
2
  • Thanks for the tip. The example is helpful. I will most probably go with your suggestion. It actually does also confirm my initial thought that the values should be on the bottom :)
    – Anton
    Feb 3, 2014 at 12:56
  • 1
    Just remember that if the slider will be used on a touchscreen, the hand may cover anything that's beneath...
    – Henrik Ekblom
    Feb 3, 2014 at 17:02

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.