20. gauge

gauge(key, value, ..., key, value)

Inserts in generated content a simple gauge control. This control can be used to edit the value of the element which is the target of the CSS rule. If "attribute, attribute_name" is specified, this control can be used to edit the value of an attribute of this target element.

KeyValueDefaultDescription
minNumber0Lower bound of the range displayed by the gauge.
maxNumber1Upper bound of the range displayed by the gauge.
stepNumber-The value of the gauge is automatically adjusted to be a multiple of step.
lowNumber-

Specifies the range that is considered to be the “low part” of the gauge.

Ignored if the gauge has a thumb.

highNumber-

Specifies the range that is considered to be the “high part” of the gauge.

Ignored if the gauge has a thumb.

optimumNumber-

Specifies the range that is considered to be the “normal part” of the gauge.

If optimum is less than low, then the “low part” is the same as the “normal part”.

If optimum is greater than high, then the “high part” is the same as the “normal part”.

Ignored if the gauge has a thumb.

thumbBoolean: yes|no, 1|0, "true"|"false", "on"|"off"noIf true, add a thumb which can be dragged using the mouse to change the value of the gauge.
low-colorColorblue

Color of the “low part” of the gauge.

Ignored if the gauge has a thumb.

high-colorColorred

Color of the “high part” of the gauge.

Ignored if the gauge has a thumb.

optimum-colorColorgreen

Color of the “normal part” of the gauge.

Ignored if the gauge has a thumb.

widthNumber (implicit px) or CSS length90pxWidth of the gauge.
heightNumber (implicit px) or CSS length15pxHeight of the gauge.

Key, value, ..., key, value may also specify style parameters.

Examples:

range {
    content: gauge(thumb, true,
                   min, -100,
                   max, 100,
                   step, 5);
}

progress {
    content: gauge(attribute, value,
                   max, 100,
                   step, 1);
}

meter {
    content: gauge(attribute, value,
                   min, -273,
                   max, 1000,
                   low, -20,
                   low-color, #80A0FF,
                   high, 55,
                   optimum, 20);
}