I am doing an eCommerce site for selling clothing and it is going to be responsive as well. I want to know what the best approach is for setting budgets.

Will a text field with a budget range will be better in UX or will a slider work best across all devices?

enter image description here


1 Answer 1


there are a number of problems to consider with sliders which you won't encounter using text boxes or the checkbox type interactions you also show in your UI snapshot in the question (I won't concern myself with those here, except to say I think they are an excellent faceted search tool).

1. user feedback

it's more tricky to give user feedback in an automated way as the slider is updated. Do you do this each time the user moves a slider, risking clogging up your interface with processing, or let them update with a button once they have selected their values?

2. result counts

As you demonstrate with the checkbox design it's very easy to give the user a count of results that match a set as the page is loaded whereas with sliders (and also with text boxes) this value cannot be set on load meaning the user can end up with empty result sets. However, with text boxes updating via Ajax when they are filled the user is not triggering as much processing as with a slider so you have more time to calculate a result count.

Users arriving at an empty search page should be avoided at all costs.

3. undoing mistakes

Once you have got to a stage where you have restricted the value range too much with a slider it is then cumbersome to undo this when compared to a text field. In a restricted space, such as a website side panel or smart phone, with slider handles too close together further mistakes can easily be made. The initial mistake can be more easily dealt with in the same restricted space when text boxes are used.

4. eye tracking

In the above example the user has to focus on four points at any given time as oppose to only having to focus on two with a pair of text boxes. They are focusing on the slider handles and on the values returned.

This can be helped somewhat by attaching the the values to the handles, but you still have extra brain processing required when compared to simple text boxes. A range is read from left to right (for English speakers as your UI and question implies) and could do without the awkward central interuption of focus.

5. speed of defining a value

Say I want to define the range £100-£200. With text boxes I just type, with sliders I need to first look at the range limits, then slide to investigate what the steps are, then guess where £100 and £200 are, then re-adjust and so on until I am at the place I want to be

6. mouse, keyboard and finger

Sliders afford mouse interaction. They have handles and people are used to using them by clicking and dragging, which is a more cumbersome interaction than focusing and typing.

Text boxes can be focused with both methods and the user is very familar with both mouse and keyboard interactions.

On mobile we use our fingers and the slider is again more cumbersome. Text boxes are a tap to focus and some taps to type, whereas as the slider is a tap to grab and slide to move, compounding point 3 above.

some further reading and sources for my answer:



from this second article, the quote: "Note that boring user interfaces usually work extremely well, because they are intuitive and easy to use" sums up a good position on sliders vs basic text boxes and a maxim that I think should always be considered when weighing up a jquery UI widget against a well established if less technically interesting basic form element.

PS, whatever you decide, use tab index and consider the keyboard focus throughout the interaction

  • 1
    I really appreciate your answer. Now I have a better idea on how I should handle the filters. I totally agree with you on this saying "Note that boring user interfaces usually work extremely well" Lets see what other experts are going to say.
    – user39648
    Feb 6, 2014 at 19:11
  • you can try using 'faceted search' or 'parameterised search' as keyphrases as this is what those filter panels are also called, particularly by those who study them seriously
    – Toni Leigh
    Feb 6, 2014 at 20:38
  • Collin what are your thoughts on this one ux.stackexchange.com/questions/51801/…
    – user39648
    Feb 6, 2014 at 23:58

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.