scale

« 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,