I want to design a range filter for an ecommerce platform that has excellent UX for mobile users.

Here's the basic interaction I could make

enter image description here

1) Where do I put the current range (when slider is not moving) ?

  • Option 1: Static in the center. This leads to unnecessary white-space


download bmml source – Wireframes created with Balsamiq Mockups

  • Option 2: Above each of the handles. This may get covered by the users thumb.


download bmml source


If you want to go with the sliders shown in your question, I will suggest you go with Option 2

Additionally, I guess this will work perfectly on mobiles as the track sliders would be a little difficult for precision with fingers.

enter image description here

This page has some more options and the code too http://www.jqueryrain.com/?ot4e1H_o

  • Wow! This is unique. But it will be harder to code and requires a lot more space :( – Shubham Kanodia Jun 3 '16 at 10:34
  • @user3210476 you can keep it small and the code is already available on the website. – Diego Jun 3 '16 at 10:42
  • Unfortunately, we are not using JQuery in our current project, and the implementation would have to be coded in React. – Shubham Kanodia Jun 3 '16 at 11:22
  • The link appears to be dead... – Benny Skogberg Sep 19 '16 at 4:02

Option 2 since in that instance the value is clearly mapped to the handle.

And I don't think you need to worry about the value being covered by the finger or thumb. In the scenario of setting the range the interaction is totally focused to this task, which means that you can let the value take up quite a generous bit of space, meaning it can be displayed above the finger. Once the user release the handle the value can shrink to fit other elements in the layout.

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.