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?

  • 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=).
    – Michael Lai
    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
    – at.
    Commented Mar 1, 2021 at 23:42

1 Answer 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)

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.