Displaying price range on mobile when max price could be very large

Question

I am designing a mobile screen where a user needs to enter a min/max price range on defective items in a house. For example, cost to replace roof $10,000 - $20,000.

I'd love to use a price range slider, although I'm not sure this is realistic since the maximum could potentially be extremely high. For example, cost to replace windows in a mansion could be $500,000.

Right now I am handling this by having a minimum cost and maximum cost text input, however I really don't like it.

Any ideas on how to handle this?

Answer 1

I can understand why you wouldn't want to use the input field, as this increases the effort the user needs to use the filter. But in cases like yours where you have described, you don't have a concrete range, the input field is the best solution.

The other solution you can use is to have ranges for the most common ones and also have the current input field if the ranges don't fulfill their needs. Check out Amazon's take on this.

This type for filters are most common on e-commerce websites and this helps reduce the learning curve.

Answer 2

If you know a minimum and a maximum value, an exponential scale is what you need:

When the price range is very wide, it is difficult to enter the desired value using a slider. We've all experienced how annoying it is to try to find the exact pixel position of a slider to get the desired value.

Additionally with a linear scale, each slider step has the same increment and it's too small in large values (you don't want to look for $500.000 by $1.000 steps) and too large in small values.

In your case, the value increment you need in small values is smaller (say $500) than near the upper limit (more like $50.000). The usual solution for this case is an exponential scale. This is how the volume knob works on a audio amplifier for instance.

price = 10 ^ (a * offset + b)

• offset is the linear position of your slider (for instance 0 to 100)
• b is a factor you pick so that 10 ^ b is your desired minimum value
• a is a factor you pick so that 10 ^ (a * 100 + b) is your desired maximum
• you can even modify the 10 to change how steep the change is

To avoid getting weird values (for instance 10 ^ 3.5 = 3162) round that price by keeping the first (or two first) digit and replacing the others by zeroes (to get 3000).

Answer 3

As the price range is just an estimate, entering a min and a max value can be replaced by a single price estimate and a margin of error as a percentage.

The price estimate would be a single value slider (exponential as in my other answer) and a radio button list with +/- 5%, +/- 10%, +/- 20%.

You can display the resulting range as a confirmation.

Answer 4

A slider with progressive scale should do the trick.