This component represents a simple scroll bar, i.e an element that can be used to choose a value using a slider. Internally, the value will always be between 0 and 1 (0 to 100%).

Three child nodes are used, one for the decrement button, one for the increment button, and one for the drag handle. All of the elements are optional, but having a drag handle is highly recommended if there is no other feedback for the user regarding the current value.

[edit] Attributes

See: Box and AbstractAsulObject for inherited attributes.

enabled

• Type: Boolean
• Default: true

Whether the scrollbar is enabled or not. When disabled, changing the value is not possible, the drag handle is made invisible and the increase / reduce buttons are disabled.

orientation

• Type: {horizontal, vertical}
• Default: horizontal

The orientation of the scroll bar, used to calculate the position of the drag handle based on the value and vice versa (the value based on where the drag handle is when being dragged).

step_large

• Type: Number
• Default: 0.1

This is a large step, used when the user clicks on the bar itself, either above/left or below/right of the drag handle (or middle, if no drag handle is defined).

step_small

• Type: Number
• Default: 0.05

This is a small step, used when the user clicks the decrement or increment button.

value

• Type: Number
• Default: 0

The starting value of this slider. This must be in an interval of 0 to 1 (inclusive). When orientation is "horizontal", 0 means totally to the left, 1 means totally to the right. When it's "vertical" 0 means totally at the top, 1 means totally at the bottom.

[edit] Child nodes

$scroll_handle$

• Type: any AbstractAsulObject, should be a Button

When given, this element is used as the drag handle for the scroll bar, i.e. to visualize the value of the scroll bar via its position, and to allow the user to change the value by dragging this element.

$btn_increase$

• Type: Button

When clicked, this increases the scroll bar's value by step_small.

$btn_reduce$

• Type: Button

When clicked, this reduces the scroll bar's value by step_small.

[edit] Example

<scrollbar anchors="0,0,pw,ph" background="gradient(linear,0x000099,0x6666CC)" value="0.25">
    <button name="$btn_reduce$" anchors="0,0,25,ph">
        <box name="$up$" anchors="2,2,pw-2,ph-2" background="color(0x9999DD)"/>
        <box name="$over$" anchors="2,2,pw-2,ph-2" background="color(0xAAAAEE)"/>
        <box name="$down$" anchors="4,4,pw-4,ph-4" background="color(0x8888CC)"/>
    </button>
    <button name="$btn_increase$" anchors="pw-25,0,pw,ph">
        <box name="$up$" anchors="2,2,pw-2,ph-2" background="color(0x9999DD)"/>
        <box name="$over$" anchors="2,2,pw-2,ph-2" background="color(0xAAAAEE)"/>
        <box name="$down$" anchors="4,4,pw-4,ph-4" background="color(0x8888CC)"/>
    </button>
    <button name="$scroll_handle$" width="25" height="25">
        <box name="$up$" anchors="4,4,pw-4,ph-4" background="color(0xDD9999)"/>
        <box name="$over$" anchors="4,4,pw-4,ph-4" background="color(0xEEAAAA)"/>
        <box name="$down$" anchors="6,6,pw-6,ph-6" background="color(0xCC8888)"/>
    </button>
</scrollbar>