Work in progress on slider redesign

From GIMP GUI Redesign
Revision as of 16:07, 25 January 2019 by Prokoudine (talk | contribs) (Existing implementations)
Jump to: navigation, search

This WIP page focuses on issues users have with the current implementation of sliders used in tools' and filters' options, researches alternative implementations, and suggests redesign options.


Executive summary: the current implementation of the slider is not obvious, makes numeric input difficult, and takes too much space on the screen.

Common issues with the current sliders as pointed out by users online:

  • The split of the slider area for small/large changes separation is not obvious. People only figure it out when specifically told about it.
  • Numeric input is too difficult to use. The area is inside the slider, so it clashes with the slider. It's also very small, hence changing the value completely (e.g. from 123.7 to 300) means having to make a very fine hand movement to select all of the digits, then press Del, then input new digits.
  • The widget occupies twice the size of the vertical space of slider widgets found in most other applications because it has to provide a high enough area for both the 'fine adjustments" and the 'large adjustments' parts of the slider to make the widget usable at all. This means users see a lot fewer controls on the screen and have to scroll for more.

Types of interaction

Sliders generally support several types of behavior.

Incrementing by dragging left and right

There are generally three subtypes:

  1. Default incrementing. Uses default increment rate, default input device sensitivity, no constraints.
  2. Incrementing with lowered sensitivity of input device to slow it down and thus allow making smaller increments using same force.
  3. Constrained incrementing. Uses a step of X units or X power of default increment rate to allow making faster increments (e.g. increment opacity by 10% for each change until it reaches either 0 or 100).

Incrementing by mouse wheel

Typically uses default increment rate.

Incrementing by buttons

Typically uses default increment rate.

Setting new value by clicking in the respective position

Allows quickly setting a value that's just about right, but might need some tweaking.

Numeric input

Allows setting precise value.

Existing implementations

Executive summary

Is there a single most common implementation people expect?

Is GIMP's current implementation matched by any other application?

As far as we can tell, not. In fact, Inkscape developers, who reused our slider widget, specifically got rid of the horizontal separation and introduced key modifiers instead.




Drag = default increment

Shift + Drag = smaller increment

Click to set to position = yes

Increment buttons = none

Constraints = none

Numeric input = none (value only displayed in the advanced brush settings dialog, not editable)




Drag = default increment

Alt + Drag = smaller increment

Ctrl + Drag = Constraint to a step of 10

Click to set to position = yes

Numeric input = by editing an entry field next to the slider

Increment buttons = to the right of the entry field



The label is to the left of the slider, outside.

Drag = default increment

Ctrl + Drag = constraint to a large step

Shift + Drag = smaller increment

Click to set to position = no, enables numeric input instead

Numeric input = by single/double-clicking inside the slider, autoselects all digits

Mouse wheel = yes, default increment, only with Ctrl modifier

Increment buttons = to the left (decrease) and to the right (increase), visible only on hover (not always available though)

Affinity Photo


Drag = default increment

Alt / Ctrl / Shift + Drag = smaller increment

Click to set value = yes

Numeric input = clicking on the field autoselects all digits

Increment buttons = no

Mouse wheel = yes, default increment, only above numeric input fields

The modifier works only in some dialogs (e.g. yes for Split Toning, no for advanced brush settings). Maybe a bug?

Adobe Photoshop


While Ardour is a non-linear video editor, it extensively uses sliders to control effects.


While Ardour is a digital audio workstation rather than a graphics app, it extensively uses sliders, especially when rendering host UI for plug-ins (instead of native plugins UI where applicable).