I want to place a filter for price on my website. Currently, I have it placed as slider.

I've though about adding a input field on the left and right of the slider which will indicate the min and max values respectively. Which will make it look like this:

enter image description here

But won't that make the place cluttered?

There are also places where filter for price are placed as checkbox.

enter image description here

But what are the other ways to go about it? and which one would be the best?

Note that, the list gets filtered dynamically once the user changes the slider or checks the checkbox.

PS: Images are not from my designs. Designs are prettier, but, under construction! :)

Thanks in advance! :)

  • 1
    If you can simplify the interface for your intended audience, that's always a good idea. But aside from that generalisation, it's tough to give a helpful answer. The "What is best?" question calls for opinions, and the lack of context makes this an impossible question to answer. Could you provide more detail? Also, please check the guidelines (on the Help menu at the top of this page) to help you form a better question.
    – JeromeR
    Nov 15 '15 at 11:45
  • I've never met a slider I've liked for numeric selection. I spend more time trying to get it to stop where I wanted than if I could have just typed it in.
    – Rob
    Nov 16 '15 at 22:30

I think input text (from)+ slider + input text (to) is the better solution. In this case you can set your own range without checking a few checkboxes. But if you want minimize requests on the server each time the customer changes slider range, then you can add a button "ok". In this case the user would set range - press ok - and see the results.

See example

Range input fields with an OK button above a corresponding slider


I would agree with JeromeR that "it depends" (all good UX questions are answered that way :-). More detail about your audience, the situation, other elements of the page, etc. may change the answers you get.

I think a slider might be a good solution (depending), though if the user does not need the precision of additional text boxes to specific detailed values, I would think that might clutter things up - unless your users DO need that level of specificity.

I also agree with Vlad that hitting the server with every single change of the slider could be pretty onerous for the user (especially if fine granularity is needed), so some sort of "submit changes to my filter" might be a good control to add... especially if there are MANY filters to set.

That, however, will also depend on the amount of data that is being loaded with each new request: if each server hit will only pull down a small amount of data and be pretty quick, you might get away with a request for every adjustment. If the results will be large for any given request, however, and users are likely to need to make many adjustments, you might want to let them tailor the details before explicitly submitting the request.

I personally do NOT like using checkboxes for range-type values like this (if only because they tend to take up more space and put more cognitive load on the user due to more decisions), but as always, you will best know the context for this control.

So there you go: it depends. But maybe this gives you a little more to think about. Good luck!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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