5

A good way to visualize the steps a slider can make is to visualize it with ticks like so:

Ticks

What would be a good way to visualize a slider can only be set into certain steps without the use of ticks?

Practical example:

enter image description here

I got 2 sliders, both with a range of 0 - 300. The upper one can only be set in steps of 30 seconds (11 steps). The lower one doesn't have this restriction and can be set on anything between 0 and 300 (301 steps).

  • "The lower one doesn't have this restriction and can be set on anything between 0 and 300" -> This is only true of the width of the slider is at least 301 pixels, and the user would be able to pixel-perfectly position the slider on the desired value. In my opinion, if you want this level of precision, a slider is not the right control. Go for an edit box or a spin control instead. – Bart Gijssens Jul 30 '15 at 8:15
3

In general, sliders only provide a better user experience in cases where the exact value isn't as important as relative value.

The classic example being a volume control where the sound volume increases or decreases as the slider thumb is adjusted to values like a little bit of sound, all the way up, no sound, etc.

volume


If generic relative values were okay in your situation then you probably wouldn't be asking this question so consider a solution that allows a user to input any value with an easy way of making sure it's a valid amount...

Demo of a numeric input with arbitrary steps

  1. The expected input should be clear up front

enter image description here

  1. Typing 210 or simply clicking the 210 link will have the same result

enter image description here

  1. Invalid input isn't prevented but valid input is always only one click away

enter image description here

9

You can use dynamic tooltip both to visualize the specificity of the control, and to show feedback for the slider control, see the picture:

enter image description here

There is a scale with the fixed points within the tooltip. The left and right next points a bit transparent close to edges and the dots convey the continuity of the scale. If desired, "major" tick marks can be displayed on the slider, and the effect will be similar to a physical "micrometer" tool.

0

You could use animations to represent the ticks. Imagine a pronounced "ease in- out- " type of acceleration/deceleration curve. The slider control would slow down as you approach the spot a tick mark would be, and speed up as you move away from one. This would mimic the building of a physical friction you might experience with a physical notched slider.

Mimicking friction would be more effective for touch devices than for mouse users, I think. You could use it in combination with a flyout like Alexy suggested.

Take a look at the Material Design guidelines on animation for examples. Codepen user Ana Tudor has some nice examples, too.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.