Your Search Results

scale

In This Article

« XUL Reference home [ Examples | Attributes | Properties | Methods | Related ]

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"/>

Image:Controlguide-scale.png

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 element is set to true 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.; 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

disabled: Type: boolean; Gets and sets the value of the disabled attribute.

increment: Type: integer; Gets and sets the value of the increment attribute.

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.

tabIndex: Type: integer; Gets and sets the value of the tabindex 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

Document Tags and Contributors

Tags:

Contributors to this page: Sheppy, trevorh, Enn, Mgjbot, Taken, MarkFinkle, Ptak82

Last updated by: Sheppy, Apr 14, 2014, 10:36:12 AM