1

Is there a standard or good way to display a range of values (lower bound and upper bound) along with a particular value. The particular value might be too low (below the lower bound), too high (above the upper bound, or normal (between the bounds)? As in results from a blood test. For example, here's a very crude drawing of those 3 scenarios: enter image description here

Maybe a timeline type of interface?

Improve this question
2
  • There are quite a few different range slider type of component design at CodePen that you might like to take a look (codepen.io/tag/rangeslider?cursor=ZD0xJm89MCZwPTE=). Commented Mar 1, 2021 at 23:35
  • @MichaelLai I’m really trying to figure out how to very clearly layout the information, that there’s a range with lower and upper bounds and a value that may or may not be within the range. A range slider is too different I think to take design cues from it Commented Mar 1, 2021 at 23:42

1 Answer 1

Reset to default
1

You can quite easily modify a bullet graph/chart for this purpose. I think the timeline component that you are referring to is still just a variation of a range slider. The only difference is that you are displaying a value that shouldn't be adjusted by the user (since it is showing a value derived from some other data source), so that control/interaction will just be disabled).

enter image description here

Essentially a bullet chart is a more fancy range slider component that has some additional elements:

  • range values that can be defined and styled as the background and stacked
  • current value that is overlaid on the defined/customized range values
  • additional marker to indicate additional values (e.g. previous or estimated value)
Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.