A scale (sometimes referred to as a "slider") allows the user to select a value from a range. A bar displayed either horizontally or vertically allows the user to select a value by dragging a thumb on the bar.
Use the orient attribute to specify the orientation of the scale. The default value is horizontal which displays a horizontal scale. Lower values are to the left and higher values are to the right. Set the orient attribute to vertical to use a vertical scale.
The user may use the arrow keys to increment and decrement the value by one unit, or the page up and page down keys to increment and decrement the value by one page, as specified by the pageincrement attribute. The home and end keys set the scale's value to the minimum and maximum values, respectively. A scale will fire a change event whenever the scale's value is modified.
- Attributes
- dir, disabled, increment, max, min, movetoclick, pageincrement, tabindex, value
- Properties
- disabled, max, min, increment, pageIncrement, tabIndex, value,
- Methods
- decrease, decreasePage, increase, increasePage,
Examples
Horizontal Scale:
<scale min="1" max="10"/>
Vertical Scale:
<scale min="1" max="10" orient="vertical"/>
Attributes
dir- Type: one of the values below
- The direction in which the child elements of the element are placed.
normal- For scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales) For other elements, the elements are placed left to right or top to bottom in the order they appear in the XUL code.
reverse- For scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales). For other elements, they are placed right to left or bottom to top. This is reverse of the order in which they appear in the XUL code.
disabled- Type: boolean
- Indicates whether the element is disabled or not. If this attribute is set, the element is disabled. Disabled elements are usually drawn with grayed-out text. If the element is disabled, it does not respond to user actions, it cannot be focused, and the
command event will not fire. In the case of form elements, it will not be submitted. Do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case.
The disabled attribute is allowed only for form controls. Using it with an anchor tag (an <a> link) will have no effect.
The element will, however, still respond to mouse events. To enable the element, leave this attribute out entirely.
- Visible controls have a
disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.
-
increment
-
Type: integer
-
The amount by which the
curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged). The default value is 1.
-
min
-
Type: integer
-
The minimum value the control's value may take. The default value is 0.
-
Type: integer
-
The maximum value that the scale or number box may be set to. The default value is 100 for scales and Infinity for number boxes.
movetoclick - Type: boolean
- If true, clicking the slide area of the scale moves the thumb directly to that position. If false, clicking the slide area moves the thumb only one increment in that direction. If not specified, the default value is used, which varies for each platform.
pageincrement- Type: integer
- The amount by which the value of the
curpos or value attribute changes when the tray of the scroll bar (the area in which the scroll bar thumb moves) is clicked, or when the page up or page down keys are pressed. The default value is 10.
tabindex- Type: integer
- The tab order of the element. The tab order is the order in which the focus is moved when the user presses the "
tab" key. Elements with a higher tabindex are later in the tab sequence.
value- Type: string
- The string attribute allows you to associate a data value with an element. It is not used for any specific purpose, but you can access it with a script for your own use. Be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) Use another attribute like "value2" or "data-myAtt" (as in the HTML5 draft), as XUL does not require validation (less future-proof); 2) Use setAttributeNS() to put custom attributes in a non-XUL namespace (serializable and future-proof); 3) Use setUserData() (future-proof and clean, but not easily serializable). For user editable
menulist elements, the contents, as visible to the user, are read and set using the Menulist.value syntax. For those elements, setAttribute("value", myValue) and getAttribute("value") do not access or affect the contents displayed to the user.
Properties
-
min
-
Type: integer
-
Gets and sets the value of the
min attribute.
-
max
-
Type: integer
-
Gets and sets the value of the
max attribute.
-
pageIncrement
-
Type: integer
-
Gets and sets the value of the
pageincrement attribute.
-
value
-
Type: string
-
Gets and sets the value of the
value attribute. For textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the Textbox.value and Menulist.value syntax.
Methods
| Inherited Methods
addEventListener(), appendChild(), blur, click, cloneNode(), compareDocumentPosition, dispatchEvent(), doCommand, focus, getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getBoundingClientRect(), getClientRects(), getElementsByAttribute, getElementsByAttributeNS, getElementsByClassName(), getElementsByTagName(), getElementsByTagNameNS(), getFeature, getUserData, hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isDefaultNamespace(), isEqualNode, isSameNode, isSupported(), lookupNamespaceURI, lookupPrefix, normalize(), querySelector(), querySelectorAll(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS(), setUserData |
-
decrease()
-
Return type: no return value
-
Decreases the value of the scale or number box by the
increment.
-
decreasePage()
-
Return type: no return value
-
Decreases the value of the scale by the
pageincrement.
-
increase()
-
Return type: no return value
-
Increases the value of the scale or number box by the
increment.
-
increasePage()
-
Return type: no return value
-
Increases the value of the scale by the page increment.
- Interfaces
nsIDOMXULControlElement