So I've got this fun little component I'm trying to put together. In this application users can set up a quality range which will be used to categorize objects based on where they fall on that range.

Essentially I need an input methodology which allows for a user to:

  1. Define a numeric range on which objects can fall
  2. Define significant threshold points within that range
  3. Easily reverse the range (so that the range values can go from low to high or high to low)

Fundamentally no matter what the threshold looks like it'll translate into a quality rating from 0-100, but for business reasons it needs to be configurable to not look like that--personally I find that silly and impractical, but hey, the users want it...

  • 4
    I suggest putting something into a Balsamiq sketch that will allow people to evaluate or critique the design, rather than letting people come up with a solution for you as an answer. I think you also need to provide some specification around point 2, because there are probably more than one valid solution.
    – Michael Lai
    Jun 16, 2015 at 3:53

2 Answers 2


The model that springs to mind for me are the widgets used in graphics tools for defining gradients, particularly those that allow for multi-stop gradients. Take, for example, Pixelmator.

Adding stops to gradients in Pixelmator

You start by defining the start and end stops of the gradients - the first and last colour. You can then click the mouse anywhere over the body of the gradient to add a colour stop at that point.

If you replace the colours in this analogy with the values of your ranges, you could do something similar. This is the sort of widget for which the microinteractions could really make or break it (e.g., not shown in these screenshots is that the cursor turns to a little + sign when mousing over the gradient, to signify that you can add something).


Are you looking for something like a price range?

enter image description here (via tweakers.net)

You can probably find a template or plugin of your liking online somewhere. If you need more than just a single selected range, though, you'll have to implement something more like what Stewart mentioned.

  • The gradients answer was basically what was needed yeah, since multiple selected ranges are a very important part of the feature set
    – moberemk
    Aug 15, 2015 at 14:26

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.