A range slider takes an input value and maps it to a point between two values, for example between 0 and 1. Typically this is done using a linear mapping, but sometimes certain areas of the range are more important than others.

Such a case might warrant allowing that important range to occupy a disproportionate amount of space on the slider. This would allow users interact with certain areas on a more fine grained level.

We could instead return the logarithm of the input value,

y = \log{x}
and get a slider that moves very quickly over low values, but more slowly at the high end of its range.

Two sliders control the opacity of the black rectangle. The first slider uses a logarithmic scale, the second uses the traditional linear scale.

Logarithmic

Linear

Notice the difference in using the two sliders. In this case, a log scale is a more natural fit for the variable being manipulated (the opacity).

The human perceptual system sometimes is sensative to the logarithm of the intensity of a certain stimulus, rather than the intensity iteslf. The standard unit for measuring sound, the decibel, is logarithmic as well.

An example implementation of this idea in React follows.

Read more about Idyll at , or .