Options class (ScrollBar)

The adjustThumbPos field specifies whether the thumb's position is automatically shown on the exactly scroll bar's value, while user drags the control's thumb.

false {boolean}, no adjustment for the thumb's position is performed while user drags it. Once the drag ends, the thumb is positioned at scroll's newly value.
true {boolean}, thumb's position is automatically adjusted at exactly scroll's value, while user drags it

The allowKeys field specifies whether the scroll-bar changes its value/position on keys.

null {null}, uses the default allowKeys value. By default, the allowKeys is false, which indicates that no keys support
false {boolean}, no keys support for the scroll bar
true {boolean}, the scroll's value can be changed using keys such as: "ArrowLeft-ArrowUp", "ArrowRight-ArrowDown", "PageUp", "PageDown", "Home" and "End". The owner canvas element must include the "tabindex" attribute, else the scroll bar receives no key events at all. The tabindex global attribute indicates if its element can be focused, and if/where it participates in sequential keyboard navigation (usually with the Tab key, hence the name).

The allowScrollDirect field specifies whether the control scrolls directly to the value from the cursor, while user right-clicks the control. The allowScrollDirect property can be any of the following values:

• 0, no button
• 1, primary button (usually left)
• 2, secondary button (usually right)
• 4, auxilary button (usually middle or mouse wheel button)
• 8, 4th button (typically the "Browser Back" button)
• 16, 5th button (typically the "Browser Forward" button)

null {null}, uses the default allowScrollDirect value. By default, the allowScrollDirect is: 2 (right mouse button)
0 {number}, disables the allowScrollDirect feature
4 {number}, indicates that the scroll jumps to value directly once the user clicks the middle-button of the mouse

The buttonSize field indicates the size of the buttons within a scroll bar.

null {null}, uses the default buttonSize value. By default, the buttonSize is 16.
0 {number}, the scroll displays no buttons
18 {number}, defines the scroll's buttons to 18-pixels

The cursors field specifies the mouse cursor to be displayed when pointing over a part of the control. The format of cursors property is:

"cursor(part),cursor(part),..."

where:

• "cursor", defines the CSS mouse cursor to display while cursor hovers the part
• "part", defines the name of the part the cursor is applied on (as defined bellow)

The "cursor" can be any of the following:

Cursor	Description
"alias"	indicates a shortcut or alias will be created
"all-scroll"	indicates scrolling in any direction
"auto"	lets the browser decide the cursor based on context
"cell"	indicates a table cell
"col-resize"	indicates a column can be resized horizontally
"context-menu"	indicates a context menu is available
"copy"	indicates something will be copied
"crosshair"	a precise crosshair cursor
"default"	the default arrow cursor
"e-resize"	resize east (right edge)
"ew-resize"	resize horizontally
"grab"	indicates an item can be grabbed
"grabbing"	indicates an item is being grabbed
"help"	indicates help information is available
"move"	indicates something can be moved
"n-resize"	resize north (top edge)
"ne-resize"	resize northeast (top-right corner)
"nesw-resize"	resize along the northeast–southwest axis
"no-drop"	indicates dropping is not permitted
"not-allowed"	indicates the action is not allowed
"ns-resize"	resize vertically
"nw-resize"	resize northwest (top-left corner)
"nwse-resize"	resize along the northwest–southeast axis
"pointer"	the pointer cursor (a hand with a pointing finger)
"progress"	indicates background processing
"row-resize"	indicates a row can be resized vertically
"s-resize"	resize south (bottom edge)
"se-resize"	resize southeast (bottom-right corner)
"sw-resize"	resize southwest (bottom-left corner)
"text"	the text selection cursor (I-beam)
"url(...)"	uses a custom cursor image (with optional fallback)
"vertical-text"	the vertical text selection cursor
"w-resize"	resize west (left edge)
"wait"	indicates the program is busy
"zoom-in"	indicates zooming in
"zoom-out"	indicates zooming out

The "part" can be any of the following:

Part	Description
"b" (exBackgroundPart)	specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts)
"l" (exLeftBPart, <)	indicates the left or top button of the scroll bar
"l1" (exLeftB1Part)	indicates the first additional button, in the left or top area
"l2" (exLeftB2Part)	indicates the second additional button, in the left or top area
"l3" (exLeftB3Part)	indicates the third additional button, in the left or top area
"l4" (exLeftB4Part)	indicates the forth additional button, in the left or top area
"l5" (exLeftB5Part)	indicates the fifth additional button, in the left or top area
"lo" (exLowerBackPart)	specifies the control's lower-background part (area between the left/top button and the thumb)
"r" (exRightBPart, >)	indicates the right or down button
"r1" (exRightB1Part)	indicates the first additional button in the right or down side
"r2" (exRightB2Part)	indicates the second additional button in the right or down side
"r3" (exRightB3Part)	indicates the third additional button in the right or down side
"r4" (exRightB4Part)	indicates the forth additional button in the right or down side
"r5" (exRightB5Part)	indicates the fifth additional button in the right or down side
"r6" (exRightB6Part)	indicates sixth additional button in the right or down side
"t" (thumb)	indicates the scroll's thumb
"up" (exUpperBackPart)	specifies the control's upper-background part (area between the thumb and the right/bottom button)

null {null}, uses the default cursors value. By default, the cursors is "auto(l1,l2,l3,l4,l5,l,lo,t,up,r,r1,r2,r3,r4,r5,r6)", or the "auto" mouse cursor is displayed for any part of the control
"crosshair(lo,up,b),pointer(t)" {string}, indicates that the "crosshair" mouse cursor is shown once the cursor hovers the control "upper", "lower" or "background" part, and "pointer" mouse cursor while cursor hovers the "thumb" part

The disableNoScroll field specifies whether the scroll bar's parts are enabled/shown or disabled/hidden, when no scroll is possible. The ScrollBar.DisableNoScrollEnum type supports the following values:

• exHideNoScroll (0), specifies that the scroll bar is hidden if no scroll is possible (while it is hosted by an exontrol.W)
• exDisableNoScroll (1), specifies that the scroll bar's buttons are disabled when no scroll is possible.
• exShowNoScroll (2), specifies that the scroll bar is visible even no scroll is possible

null {null}, uses the default disableNoScroll value. By default, the disableNoScroll is ScrollBar.DisableNoScrollEnum.exDisableNoScroll
2 or ScrollBar.DisableNoScrollEnum.exShowNoScroll {number}, specifies that the scroll bar is visible even no scroll is possible

The enableParts field defines the enabled parts of the scroll bar, separated by comma. The parts of the control are:

Part	Description
"l"	Left or top button of the scroll bar
"l1"	First additional button in the left or top area
"l2"	Second additional button in the left or top area
"l3"	Third additional button in the left or top area
"l4"	Fourth additional button in the left or top area
"l5"	Fifth additional button in the left or top area
"t"	Scroll bar thumb
"r"	Right or down button of the scroll bar
"r1"	First additional button in the right or down area
"r2"	Second additional button in the right or down area
"r3"	Third additional button in the right or down area
"r4"	Fourth additional button in the right or down area
"r5"	Fifth additional button in the right or down area
"r6"	Sixth additional button in the right or down area
"lo"	Lower background (between left/top button and thumb)
"up"	Upper background (between thumb and right/bottom button)
"b"	Background (union of lower and upper background parts)

Any other literal between commas is ignored. If duplicate literals are found, the second is ignored, and so on.

null {null}, uses the default enableParts value. By default, the enableParts is "l,t,r,b", which indicates that only "left-button", "thumb", "right-button" and "background" parts are enabled
"l,t,r" {string}, indicates that only "left-button", "thumb" and "right-button" parts are enabled. In other words, the "background" part is disabled which indicates the no page up or page down is available once the user clicks the upper or lower-background of the scroll

The horizontalOverlayShapes field defines the overlay shapes each part applies, when the scroll-bar's mode is exHorizontal. An overlay shape is displayed over the background and foreground shapes, such as "arrows" of the buttons. The format of horizontalOverlayShapes property is:

"shape(part),shape(part),..."

where:

• "shape", defines the shape to apply on the UI part as one of the following:

  ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
  ◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
  ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
  ◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
  ◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
  ◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
  ◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
  ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
  ◦ specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)
  ◦ defines the name of the property of exontrol.Shapes.ScrollBar.overlay object to be applied on the part, such as "left", "right", "leftLite", "rightLite", etc.

• "part", defines the name of the part the shape is applied on (as defined bellow)

The horizontalOverlayShapes property supports any of the following parts:

Part	Description
"l"	Left or top button of the scroll bar
"l1"	First additional button in the left or top area
"l2"	Second additional button in the left or top area
"l3"	Third additional button in the left or top area
"l4"	Fourth additional button in the left or top area
"l5"	Fifth additional button in the left or top area
"t"	Scroll bar thumb
"r"	Right or down button of the scroll bar
"r1"	First additional button in the right or down area
"r2"	Second additional button in the right or down area
"r3"	Third additional button in the right or down area
"r4"	Fourth additional button in the right or down area
"r5"	Fifth additional button in the right or down area
"r6"	Sixth additional button in the right or down area
"lo"	Lower background (between left/top button and thumb)
"up"	Upper background (between thumb and right/bottom button)
"b"	Background (union of lower and upper background parts)

null {null}, uses the default horizontalOverlayShapes value. By default, the horizontalOverlayShapes is "leftLite(l),rightLite(r)".
"left(l)" {string}, indicates that "l" (left-button) applies the overlay shape defined by exontrol.Shapes.ScrollBar.overlay.left
"left(l),right(r)" {string}, defines arrows for scroll-rectangular or scroll-circle

The horizontalShapes field defines the shapes each part of the control applies, when the scroll-bar's mode is exHorizontal. The format of horizontalShapes property is:

"shape(part),shape(part),..."

where:

• "shape", defines the shape to apply on the UI part as one of the following:

  ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
  ◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
  ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
  ◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
  ◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
  ◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
  ◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
  ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
  ◦ defines the name of the property of exontrol.Shapes.ScrollBar.background/exontrol.Shapes.ScrollBar.foreground object to be applied on the part, such as "button", "hThumbLite", "hBackCircle", etc.

• "part", defines the name of the part the shape is applied on (as defined bellow)

The horizontalShapes property supports any of the following parts:

Part	Description
"l"	Left or top button of the scroll bar
"l1"	First additional button in the left or top area
"l2"	Second additional button in the left or top area
"l3"	Third additional button in the left or top area
"l4"	Fourth additional button in the left or top area
"l5"	Fifth additional button in the left or top area
"t"	Scroll bar thumb
"r"	Right or down button of the scroll bar
"r1"	First additional button in the right or down area
"r2"	Second additional button in the right or down area
"r3"	Third additional button in the right or down area
"r4"	Fourth additional button in the right or down area
"r5"	Fifth additional button in the right or down area
"r6"	Sixth additional button in the right or down area
"lo"	Lower background (between left/top button and thumb)
"up"	Upper background (between thumb and right/bottom button)
"b"	Background (union of lower and upper background parts)

null {null}, uses the default horizontalShapes value. By default, the horizontalShapes is "hThumbLite(t)".
"hThumbLite(t)" {string}, defines a lite-scroll, or shotly it applies the exontrol.Shapes.ScrollBar.background.hThumbLite and exontrol.Shapes.ScrollBar.foreground.hThumbLite on "thumb" part
"button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),hThumb(t),back(lo,b,up)" {string}, defines a rectangular-scroll
"buttonCircle(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),hThumbCircle(t),hBackCircle(b)" {string}, defines a circular-scroll
"button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6)" {string} indicates that all l1-r6 applies the exontrol.Shapes.ScrollBar.background.button and exontrol.Shapes.ScrollBar.foreground.button shapes.

The ignoreLargeChange field specifies whether the large change value is ignored when getting the maximum value.

null {null}, uses the default ignoreLargeChange value. By default, the ignoreLargeChange is false.
false {boolean}, specifies that the scroll's value goes from min to max
true {boolean}, specifies that the scroll's value goes from min to (max - page)

The largeChange field specifies the amount by which the scroll box position changes when the user clicks the scroll's background or presses the PAGE UP or PAGE DOWN keys.

null {null}, uses the default largeChange value. By default, the largeChange is 10.
0 {number}, no change once the user clicks the scroll's background or presses the PAGE UP or PAGE DOWN keys.
10 {number}, increases or decreases the scroll's value  by 10 when the user clicks the scroll's background or presses the PAGE UP or PAGE DOWN keys.

The locked field indicates whether the control is locked(protected) or unlocked.

false {boolean}, unlocks the control
true {boolean}, locks the control (the user can not click or drag any part of the control)

The max field specifies scroll bar's maximum value.

100 {number}, indicates that the scroll's value is always less than 100

The min field specifies scroll bar's minimum value.

0 {number}, indicates that the scroll's value is always greater than 0

The mode field defines the mode the scroll bar displays its parts The ScrollBar.ModeEnum type supports the following values:

• exAuto (-1), indicates that the size of the scroll bar determines what mode is displayed as: if the scroll bar's width is greater than its height, then a horizontal scroll is displayed, else a vertical scroll bar is shown
• exVertical (0), indicates that the control displays a vertical scroll bar
• exHorizontal (1), indicates that the control displays a horizontal scroll bar

-1 or ScrollBar.ModeEnum.exAuto {number}, specifies that the scroll bar shows as vertical or horizontal depending on its size
0 or ScrollBar.ModeEnum.exVertical {number}, always displays a vertical scroll bar
1 or ScrollBar.ModeEnum.exHorizontal {number}, always displays a horizontal scroll bar

The orderParts field defines the order of the scroll bar parts, separated by comma. The parts of the control are:

Part	Description
"l"	Left or top button of the scroll bar
"l1"	First additional button in the left or top area
"l2"	Second additional button in the left or top area
"l3"	Third additional button in the left or top area
"l4"	Fourth additional button in the left or top area
"l5"	Fifth additional button in the left or top area
"t"	Scroll bar thumb
"r"	Right or down button of the scroll bar
"r1"	First additional button in the right or down area
"r2"	Second additional button in the right or down area
"r3"	Third additional button in the right or down area
"r4"	Fourth additional button in the right or down area
"r5"	Fifth additional button in the right or down area
"r6"	Sixth additional button in the right or down area
"lo"	Lower background (between left/top button and thumb)
"up"	Upper background (between thumb and right/bottom button)
"b"	Background (union of lower and upper background parts)

Any other literal between commas is ignored. If duplicate literals are found, the second is ignored, and so on.

null {null}, uses the default orderParts value. By default, the orderParts is "l1,l2,l3,l4,l5,l,t,r,r1,r2,r3,r4,r5,r6"
"t,l,r" {string}, indicates that the left/top and right/bottom buttons are displayed right/bottom after the thumb part

The readOnly field indicates whether the control is read-only.

false {boolean}, unlocks the control
true {boolean}, the user can't change the control's value by dragging the thumb

The scrollOnThumbRelease field indicates whether the scroll occurs as soon as the user releases the thumb-box.

The smallChange field specifies the amount by which the scroll box position/value changes when the user clicks a scroll arrow or presses an arrow key.

null {null}, uses the default smallChange value (default: 1).
0 {number}, no change once the user clicks the left/top or right/bottom buttons
1 {number}, increases or decreases the scroll's value  by 1 when the user clicks a scroll arrow or presses an arrow key

The tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.

The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:

• bold, displays the text in bold (equivalent of <b> tag)
• italic, displays the text in italics (equivalent of <i> tag)
• underline, underlines the text (equivalent of <u> tag)
• strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
• <fontName name>, specifies the font's family (equivalent of <font name> tag)
• <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
• <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
• <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
• <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
• <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
• <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)

Any other word within the tfi field that's not recognized as a keyword is interpreted as:

• name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
• size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)

The tfi field as object supports any of the following fields:

• bold {boolean}, displays the text in bold (equivalent of <b> tag)
• italic {boolean}, displays the text in italics (equivalent of <i> tag)
• underline {boolean}, underlines the text (equivalent of <u> tag)
• strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
• fontName {string}, specifies the font's family (equivalent of <font name> tag)
• fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
• fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
• bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
• shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
  • color {string}, defines the color of the text's shadow (CSScolor)
  • width {number}, defines the size of the text's shadow
  • offset {number}, defines the offset to show the text's shadow relative to the text
• outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
• graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
  • color {string}, defines the gradient-color (CSScolor)
  • mode {number}, defines the gradient direction as 0 (left-right), 1 (default, top-bottom), 2 (left-center-right), and 3 (top-center-bottom)
  • blend {number}, defines the gradient blend as a value between 0 and 1

CSSColor or CSS legal color values can be specified by the following methods:

• Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
• Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
• RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
• RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
• HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
• HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
• Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.

null {null}, the tfi field is ignored
"bold monospace 16 <fg blue>" {string}, defines Monospace font of 16px height, bold and blue
{bold: true, fontName: "monospace", fontSize: 16, fgColor: "blue"} {object}, defines Monospace font of 16px height, bold and blue

The thumbSize field indicates the size to display the scroll bar's thumb.

null {null}, uses the default thumbSize value. By default, the thumbSize is -1 (thumb's size automatically is computed based on scroll's margins (min, max and page))
-1 {number}, indicates that the thumb's size automatically is computed based on scroll's margins (min, max and page)
0 {number}, the scroll displays no thumb
128 {number}, defines the scroll's thumb to 128-pixels

The value field specifies scroll bar's value. The range of value is:

• between min and max, if the ignoreLargeChange property is true
• between min and max - largeChange, if the ignoreLargeChange property is false

The newly value is always adjusted so it fits its range.

25 {number}, changes the scroll's value to 25. The "onchange" event occurs, once the scroll's value is changed.

The verticalOverlayShapes field defines the overlay shapes each part applies, when the scroll-bar's mode is exVertical. An overlay shape is displayed over the background and foreground shapes. The format of verticalOverlayShapes property is:

"shape(part),shape(part),..."

where:

• "shape", defines the shape to apply on the UI part as one of the following:

  ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
  ◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
  ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
  ◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
  ◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
  ◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
  ◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
  ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
  ◦ specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)
  ◦ defines the name of the property of exontrol.Shapes.ScrollBar.overlay object to be applied on the part, such as "left", "right", "leftLite", "rightLite", etc.

• "part", defines the name of the part the shape is applied on (as defined bellow)

The verticalOverlayShapes property supports any of the following parts:

Part	Description
"l"	Left or top button of the scroll bar
"l1"	First additional button in the left or top area
"l2"	Second additional button in the left or top area
"l3"	Third additional button in the left or top area
"l4"	Fourth additional button in the left or top area
"l5"	Fifth additional button in the left or top area
"t"	Scroll bar thumb
"r"	Right or down button of the scroll bar
"r1"	First additional button in the right or down area
"r2"	Second additional button in the right or down area
"r3"	Third additional button in the right or down area
"r4"	Fourth additional button in the right or down area
"r5"	Fifth additional button in the right or down area
"r6"	Sixth additional button in the right or down area
"lo"	Lower background (between left/top button and thumb)
"up"	Upper background (between thumb and right/bottom button)
"b"	Background (union of lower and upper background parts)

null {null}, uses the default verticalOverlayShapes value. By default, the verticalOverlayShapes is "upLite(l),downLite(r)".
"up(l)" {string}, indicates that l applies the overlay shape defined by exontrol.Shapes.ScrollBar.overlay.up
"up(l),down(r)" {string}, defines arrows for scroll-rectangular or scroll-circle

The verticalShapes field defines the shapes each part of the control applies, when the scroll-bar's mode is exVertical. The format of verticalShapes property is:

"shape(part),shape(part),..."

where:

• "shape", defines the shape to apply on the UI part as one of the following:

  ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
  ◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
  ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
  ◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
  ◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
  ◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
  ◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
  ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
  ◦ defines the name of the property of exontrol.Shapes.ScrollBar.background/exontrol.Shapes.ScrollBar.foreground object to be applied on the part, such as "button", "hThumbLite", "hBackCircle", etc.

• "part", defines the name of the part the shape is applied on (as defined bellow)

The verticalShapes property supports any of the following parts:

Part	Description
"l"	Left or top button of the scroll bar
"l1"	First additional button in the left or top area
"l2"	Second additional button in the left or top area
"l3"	Third additional button in the left or top area
"l4"	Fourth additional button in the left or top area
"l5"	Fifth additional button in the left or top area
"t"	Scroll bar thumb
"r"	Right or down button of the scroll bar
"r1"	First additional button in the right or down area
"r2"	Second additional button in the right or down area
"r3"	Third additional button in the right or down area
"r4"	Fourth additional button in the right or down area
"r5"	Fifth additional button in the right or down area
"r6"	Sixth additional button in the right or down area
"lo"	Lower background (between left/top button and thumb)
"up"	Upper background (between thumb and right/bottom button)
"b"	Background (union of lower and upper background parts)

null {null}, uses the default verticalShapes value. By default, the verticalShapes is "vThumbLite(t)".
"vThumbLite(t)" {string}, defines a lite-scroll, or shotly it applies the exontrol.Shapes.ScrollBar.background.vThumbLite and exontrol.Shapes.ScrollBar.foreground.vThumbLite on "thumb" part
"button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),vThumb(t),back(lo,b,up)" {string}, defines a rectangular-scroll
"buttonCircle(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),vThumbCircle(t),vBackCircle(b)" {string}, defines a circular-scroll
"button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6)" {string} indicates that all l1-r6 applies the exontrol.Shapes.ScrollBar.background.button and exontrol.Shapes.ScrollBar.foreground.button shapes.

The visibleParts field defines the visible parts of the scroll bar, separated by comma. The parts of the control are:

Part	Description
"l"	Left or top button of the scroll bar
"l1"	First additional button in the left or top area
"l2"	Second additional button in the left or top area
"l3"	Third additional button in the left or top area
"l4"	Fourth additional button in the left or top area
"l5"	Fifth additional button in the left or top area
"t"	Scroll bar thumb
"r"	Right or down button of the scroll bar
"r1"	First additional button in the right or down area
"r2"	Second additional button in the right or down area
"r3"	Third additional button in the right or down area
"r4"	Fourth additional button in the right or down area
"r5"	Fifth additional button in the right or down area
"r6"	Sixth additional button in the right or down area
"lo"	Lower background (between left/top button and thumb)
"up"	Upper background (between thumb and right/bottom button)
"b"	Background (union of lower and upper background parts)

Any other literal between commas is ignored. If duplicate literals are found, the second is ignored, and so on.

null {null}, uses the default visibleParts value. By default, the visibleParts is "l,t,r,b", which indicates that only "left-button", "thumb", "right-button" and "background" parts are visible
"t,b" {string}, indicates that only "thumb", "background" parts are visible

The wheelChange field specifies the amount by which the scroll box position changes when the user rotates the mouse wheel.

null {null}, uses the default wheelChange value. By default, the wheelChange is 1.
0 {number}, no change while the user rotates the mouse wheel.
1 {number}, increases or decreases the scroll's value by 1 when the user rotates the mouse wheel