I'm working on adding a price slider to an existing price filter on an e-commerce shop that uses price buckets (predefined price ranges).

If the user selects any of the price buckets, the slider above would update as well (but we won't update it vice versa, for obvious reasons). However, for the last option, "above 50", I can't figure out a way to display this on the slider as it would be infinite. Any ideas on how the slider would display the last option?

P.S. We ruled out changing the last option to another price bucket as we can't dynamically define the buckets based on the most expensive item in the shop.

enter image description here

  • How does a user use the slider to select above 150? – Pesikar Dec 8 '15 at 9:08
  • I assume it's not just a visual indicator: The user can filter using the slider, right? – plainclothes Dec 8 '15 at 20:07
  • @plainclothes yes, this is an interactive control – Ameen Akbar Dec 9 '15 at 3:07

One option is to use the label MAX or MAXIMUM : enter image description here

  • +1 > the right end should represent the max, just as the left end should represent 0 or your minimum. – plainclothes Dec 8 '15 at 20:08

You can change the sliders (knobs) to show the direction of the range, and you can remove one of the sliders if the range isn't bound:

Example of bound and unbound range

  • 1
    How would a user know to remove the indicator? – plainclothes Dec 8 '15 at 20:08
  • @plainclothes Click one of the other three ranges. They'd know about these links because one of them made the upper-limit slider disappear. A usability test would show how confusing that is, and thus whether it's a good design idea. – JeromeR Dec 9 '15 at 19:15
  • So you would disallow activation of the upper limit without first activating one of the fixed groups? IOW, the slider wouldn't be fully operational without using another control. – plainclothes Dec 9 '15 at 19:46
  • @plainclothes I guess you have a hypothesis about how this would perform in a usability test where people want to switch from an "unbounded" range to a bounded range. I don't know what the customers or users are expected to do, so I have no hypothesis. – JeromeR Dec 11 '15 at 17:33
  • Fair enough. My hypothesis (based on previous ecomm tests) is that when provided with two ways to filter (fixed ranges or a slider) users won't consistently choose one over the other. Limiting the features of the slider option (which has gained in popularity) seems like an unnecessary constraint. – plainclothes Dec 11 '15 at 18:12

There is very elegant solution to this problem:

Before displaying the ranges and slider you ask the system: What is the smallest and largest price?

Then ask the system to make evenly distributed buckets between min and max price.

User experience is about creating usable interfaces. MAX doesn't tell user what is maximum value. Same for minimal value. So you should display them.

Also, predefined price rages can have badly grouped number of items.

Example: from $10-50 there are 500 items, but from $100-150 there are only 3.

That is bad UX. Let the system create more meaningful price ranges for the users.


Price sliders are bad design. You need a variable min and a variable max with a max that can be indefinite. The slider provides the min and the max but not the indefinite value that can provide the dropdown.

exemple of implementation of dropdown for filtering

  • Please provide any evidence that they are bad design – Ameen Akbar Dec 14 '15 at 6:32
  • @AmeenAkbar it's bad design precisely for the reasons of your struggle. You need a variable min and a variable max with a max that can be indefinite. The slider provides the min and the max but not the indefinite value that can provide the dropdown. – Julien Reszka Dec 14 '15 at 8:07
  • This isn't answering the question. The solution you are proposing has the exact limitations why we are moving to slider control in the 1st place. – Ameen Akbar Dec 15 '15 at 7:40
  • @AmeenAkbar i think you don't understand. When you use a dropdown you can use any value that you want even an indefinite value like when no value is selected. You can't do that with your slider. When the value of the max is indefinite, the filter only removes the items with values under the min from the results. When the value of the max is definite, the filter removes the items with values above the max from the results. – Julien Reszka Dec 15 '15 at 7:51
  • I updated my answer with a picture. Prix = price in French – Julien Reszka Dec 15 '15 at 8:04

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.