20. gauge

20. gauge
	Chapter 5. Content objects

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.

Key	Value	Default	Description
min	Number	0	Lower bound of the range displayed by the gauge.
max	Number	1	Upper bound of the range displayed by the gauge.
step	Number	-	The value of the gauge is automatically adjusted to be a multiple of `step`.
low	Number	-	Specifies the range that is considered to be the “low part” of the gauge. Ignored if the gauge has a thumb.
high	Number	-	Specifies the range that is considered to be the “high part” of the gauge. Ignored if the gauge has a thumb.
optimum	Number	-	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.
thumb	Boolean: yes\|no, 1\|0, "true"\|"false", "on"\|"off"	no	If true, add a thumb which can be dragged using the mouse to change the value of the gauge.
low-color	Color	blue	Color of the “low part” of the gauge. Ignored if the gauge has a thumb.
high-color	Color	red	Color of the “high part” of the gauge. Ignored if the gauge has a thumb.
optimum-color	Color	green	Color of the “normal part” of the gauge. Ignored if the gauge has a thumb.
width	Number (implicit `px`) or CSS length	90px	Width of the gauge.
height	Number (implicit `px`) or CSS length	15px	Height 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);
}


19. gadget		21. icon