The Australian Government coat of Arms

Communities of practice

Communities of practice

Range slider

As an input control for known range values, either continuous or stepped (i.e. with set tick marks):


From the US Government Design System: Range Slider

See an example of this slider in use, when I created a model to calculate the Value of the NBN, under various scenarios, selected by the slider;


Working model:

1 Like

I do think from an interaction design point of view it is better for the movable element of the component to be better distinguished from the non-interactive part. Just wondering if you think it is good practice to display the min/max values as well as the current value at the same time?

The component on the left of the slider is also quite interesting (although not strictly related), can you tell us more behind the thinking for this (which doesn’t appear to be a ‘conventional’ pattern).

I think it is important to show all three data points:

  • min
  • max
  • current level.
    But min/max are static and should be less prominent, but available to guide understanding.

The three dots on the left allow you to change the slider ie amend any of the variables affecting the slider eg min/max/step or starting value. This is a feature of the Observable platform. Anyone can amend the code, and if want to keep it can fork (ie copy) the file into their own account.

So what are your thoughts on NNg’s recommendation about the use of range sliders:

Use a slider only when the precise value won’t matter to the user, but rather only the approximate range. Make sure that the users can select that range correctly without having to struggle too much to hit a precise value. In addition, any slider labels must be displayed above or beside the slider, rather than below it, in order to remain visible while the user is selecting a value. Alternatively, consider a different UI element that allows users to tap or even type to specify their choice rather than relying on press-and-drag gestures.

Most implementations that I have seen will display the current value when the user is moving the slider (above or below the slider), and will either show the max/min value or major/minor tick marks to provide and indication of the range.

It seems like a very common UI element in the Observable platform, so perhaps not all of the usual guidelines apply to your implementation. An interesting case study for sure.

I would disagree with the precise value statement.
It is perfectly fine for a 0-100 selection.
But probably not appropriate for a 0 - 1million selection, where more precise text box is probably better, or a range of options.

Slide is good because it is tactile, especially where as in the NBN model, the model changes as you slide, so you can almost feel the model since it is responsive to small, large slow or fast changes to the slider. Entering a number in a text box remove this tactile aspect.