Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question

1 Answer 1

up vote 3 down vote accepted

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

share|improve this answer
    
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 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 at 17:02

Your Answer

 
discard

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.