Personal tools

XUL:Slider Tag

From MozillaWiki

Jump to: navigation, search

This widget will be named to <scale> to make the CSS implementation part simpler. Also, this allows the easier addition of other parts such as the tick marks, value label and so on in different themes. Third, it means we easily can use a better name than 'curpos' for the value, like 'value'. The scale XBL will still contain a slider inside it. The scale XBL would inherit from 'general.xml#basecontrol'.

A scale consists of a track with a thumb, much like a scrollbar. It is used to select a value in a given range. The user may drag the thumb across the scale track to adjust the value.

A scale may be disabled using the disabled attribute, and may receive the focus.

If the orientation (the orient attribute) of the scale is horizontal, the track extends from left to right, with the right side of the scale being the maximum value. If the orientation of the scale is vertical, the track extends from top to bottom, with the bottom side of the scale being the maximum value.

Does there need to be support for dir='rtl' where the maximum value is on the left or top? Answer: yes, except through chromedir='rtl'

Keys may be used to adjust the scale:

  • Cursor Up: decrement the value of the scale by one unit.
  • Cursor Down: increment the value of the scale by one unit.
  • Cursor Left: decrement the value of the scale by one unit.
  • Cursor Right: increment the value of the scale by one unit.
  • Page Up: decrement the value of the scale by one page.
  • Page Down: increment the value of the scale by one page.
  • Home: set the value of the scale to the minimum value.
  • End: set the value of the scale to the maximum value.

The size of a unit is specified by the increment attribute. The size of a page is specified by the pageincrement attribute.


Scale {
 // holds the current value of the scale, which must be greater than or equal to
 // the value of min, and less than or equal to the max. If an attempt is made
 // to set the value less than min, the value will be given the value 0. If an
 // attempt is made to set the value greater than max, the value will be given the
 // value of max. The default value is 0.
 integer value;
 // holds the minimum value that value can be. The default value is 0.
 integer min;
 // holds the maximum value that value can be. The default value is 100.
 integer max;
 // the size of a unit. The scale value is adjusted by this value when the cursor
 // keys are pressed or when the increase or decrease functions are called.
 integer increment;
 // the size of a page. The scale value is adjusted by this value when the page up
 // and page down keys are pressed or when the increasePage or decreasePage functions
 // are called. The corresponding attribute pageincrement is all lowercase.
 integer pageIncrement;
 // decrease the value of the scale by one unit.
 void decrease();
 // increase the value of the scale by one unit.
 void increase();
 // increase the value of the scale by one page.
 void decreasePage();
 // increase the value of the scale by one page.
 void increasePage();
 // the change event is fired on the scale when the value is adjusted by the user.
 event change;
}

Some other features to consider to make the scale more useful:

integer tickCount

Tick marks may optionally be displayed along one edge of the scale. This property holds the number of tick marks to be displayed. If this value is 0, then no ticks appear. For other values, the ticks are evenly placed along the edge of the scale.
Native toolkits draw tick marks in very different ways so this may be difficult to implement.

boolean showLabel

A label may be optionally be displayed next to the scale which shows the current value.

enum labelPosition

Indicates the position of the label. This property is ignored if showLabel is not set to true. Possible values:
  • start - for horizontal orientation and left to right direction, the label appears to the left of the scale. For horizontal orientation and right to left direction, the label appears to the right. For vertical orientation and left to right direction, the label appears above the scale. For vertical orientation and right to left direction, the label appears below.
  • end - for horizontal orientation and left to right direction, the label appears to the right of the scale. For horizontal orientation and right to left direction, the label appears to the left. For vertical orientation and left to right direction, the label appears below the scale. For vertical orientation and right to left direction, the label appears above.
  • above - for horizontal orientation, the label appears above the scale's thumb. For vertical orientation, the label appears to the left of the scale's thumb.
  • below - for horizontal orientation, the label appears below the scale's thumb. For vertical orientation, the label appears to the right of the scale's thumb.