How to visualize slider steps without ticks

Question

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

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

Practical example:

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).

Answer 1

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.

---

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

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

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

Answer 2

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

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.

Answer 3

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.