Why Figma's slider implementation is amazing

A bad thing about computer screens? They are limited in size.

You’ll notice this, when you build a UI element with a finite amount of possible values. While a slider might be the first approach, it is only useful if the possible values are limited with a upper (max) and lower (min) bound and also in their total number of values. You cant provide a slider with 2000 values, can you? The typical UI element to use is a (web) number input. You can set a min and max value and you can use some logic to map any user input to a valid input. Sounds great? It is! However, it has an important drawback: the missing slider.

Why sliders are great

How do you know what value to use on an input field to round the corners of a box? “The proof of the pudding is in the eating”. You start with a large value, followed by a small value to get a rough idea about the proportion of the values. You now repeat this with the values closer to one of both previous inputs. As you get closer to your desired value you need to test almost each possible value until you are happy with your choosen value. You event might identify a binary search in this approch. This is why some number inputs provide a slider. You can skip the part where you need to type multiple values to get a rough idea about the proportion of each value by simply using your mouse or finger and sliding (the value) to the left or right. This is such a UX improvement.

More and more values

Canva provides you with a slider - which is great! They use sliders, because their users (in general) do not need pixel-perfect tools¹. This is different for designers and developers. In a developer’s world, you can not limit tools to a specific, finite set of values. There are too many different ranges which would make the usage of a slider UI element intransparent. The user would have to guess whether the range is from 1 to 100, 0 to 1, or 5 to 25. This is why tools like the Chrome Dev Tools or Figma as a design tool uses hidden slider.

The hidden slider

A hidden slider is controled by the mouse pointer. The slider (vertical) bar is not visible to the user and can be activated by clicking on the primary range input value (mostly some number input). The user can use the whole screen as the slider range and the UI is not clogged up with a lot of sliders. Using the whole screen as the slider input is a game changer. The tool provides a wider range of input values. However, you’re limited in size. You’re only able to go to the right until the end of your computer screen (or browser window). If the number input is located closed to the right of the screen there’s not much room for increasing the value.

Figma’s infinite slider

Recently I came across the implementation of Figma’s sliders. They do not stop at the end of the screen². They have a infinite canvas. You can move your mouse pointer out to the right of the screen just to reenter the screen on the left. This way you can perfectly adjust the value just by moving your mouse.

There are still some improvements need to be made: when I use my trackpad I am hardly able to slide over the whole screen without releasing my finger from the trackpad or before I reach the end of the trackpad. Maybe the slider can be improved to allow a double click to enter a sliding state and exit it by clicking again or pressing ESC. Constructing such a sliding state could also provide room for extra features: detailed sliding. A sliding mode in which you lower the input value factor by some magnitude to allow more detailed sliding (e.g., normal sliding alters the value by 1,00 per 10 pixels while detailed mode alters the value by 0,05 per 10 pixels).

What Figma is doing right

Figma is talking to their users. They get a lot of customer feedback. Another thing that should not be underestimated is that they use their own product. Being your own customer or even power user lets you understand your product limits and bottlenecks. If you get frustrated yourself by using your sliders you think about ideas improving it. And that is great!

Appendix: Chrome DevTools Slider

The Slider in Chrome DevTools is long gone . I think it was a great concept but it was conflicting with a lot of other features . You can still enable it in the Chrome DevTools settings: Settings > Experiment > Deprecate CSS authoring tool in the Styles tab. Until this day I do not understand this weird naming CSS length.