A SliderBar is a type of ProgressBar which allows its value to be changed by the player by clicking and dragging.

<SliderHandle Components="Frame" Size="12, 100%" Pivot="50%"/>

<SliderBar Components="Frame, MouseHandler" Controller="SliderBar">
    <SliderHandle Name="Handle"/>
</SliderBar>

<HorizontalSliderBar Base="SliderBar" Direction="Horizontal" Style="HorizontalSliderBar">
    <SliderHandle Name="Handle" Size="10%, 100%" Style="HorizontalSliderHandle"/>
</HorizontalSliderBar>

<VerticalSliderBar Base="SliderBar" Direction="Vertical" Style="VerticalSliderBar">
    <SliderHandle Name="Handle" Size="100%, 10%" Style="VerticalSliderHandle"/>
</VerticalSliderBar>

There exist three different SliderBar templates and a single SliderHandle template.

The basic SliderBar template defines the Frame and MouseHandler components and SliderBar controller. The HorizontalSliderBar and VerticalSliderBar templates use SliderBar as a base but simply change the layout and style.

The SliderHandle template is a basic element simply defining a Frame component and some positional data. This can easily be replaced with a different element as it has no unique behaviour.

<SliderBar Size="128, 16">
    <SliderHandle Size="24, 16" Name="Handle"/>
</SliderBar>

The basic SliderBar template can be used as-is, although the handle will need to be overridden so that it has a size.

<HorizontalSliderBar Size="128, 16"\>

<VerticalSliderBar Size="16, 128"\>

The directional SliderBar templates can be used as-is, the handle is automatically sized to 10% of the width or height of the bar.

As the SliderBar controller extends the ProgressBar controller, all attributes from the latter are used and the SliderBar itself has no attributes.