From AddOn Studio
Jump to navigation Jump to search

XML UI ← XML elements < Slider

Slider is an element that acts as a traditional graphical slider control in the WoW UI. Like ScrollFrame, 'Slider' is a Frame and is placed in a Frames list in a Frame.


Inherited by: none, Inherits: Frame
Widget API: UIObject Slider



  • drawLayer (DRAWLAYER) - Layer level in 'Z order'. Default is 'OVERLAY'.
  • minValue (float) - defines a minimum value for the slider
  • maxValue (float) - defines a maximum value for the slider
  • defaultValue (float) - starting value for an newly loaded slider
  • valueStep (float) - amount to increment value for a 'step' action, like when the slider 'thumb' is slid
  • orientation (ORIENTATION) - Default is VERTICAL.
  • stepsPerPage (float) - number of 'valueSteps' to increment value for a 'page' action, like when slider 'bar' is clicked


  • name (string) - name of this layout frame
  • inherits (string) - a virtual Frame to inherit properties from.
  • virtual (bool) - Default is 'false'.
  • ... (others from Frame)


<xs:extension base="FrameType">
  <xs:sequence minOccurs="0">
    <xs:choice maxOccurs="unbounded">
      <xs:element name="ThumbTexture" type="TextureType"/>
  <xs:attribute name="drawLayer" type="ui:DRAWLAYER" default="OVERLAY"/>
  <xs:attribute name="minValue" type="xs:float"/>
  <xs:attribute name="maxValue" type="xs:float"/>
  <xs:attribute name="defaultValue" type="xs:float"/>
  <xs:attribute name="valueStep" type="xs:float"/>
  <xs:attribute name="orientation" type="ui:ORIENTATION" default="VERTICAL"/>


The Slider element is used to display graphical slider control in the user interface. The silder widget itself provides the behaviour, however the textures still need to be provided.


<Ui xmlns=""

  <Slider name="MySlider_Template" orientation="HORIZONTAL" enableMouse="true" virtual="true">
    <Size x="144" y="17"/>
    <HitRectInsets left="0" right="0" top="-10" bottom="-10"/>
    <Backdrop bgFile="Interface\Buttons\UI-SliderBar-Background"
        edgeFile="Interface\Buttons\UI-SliderBar-Border" tile="true">
      <EdgeSize val="8"/>
      <TileSize val="8"/>
      <BackgroundInsets left="3" right="3" top="6" bottom="6"/>
    <ThumbTexture name="$parentThumb" file="Interface\Buttons\UI-SliderBar-Button-Horizontal">
      <Size x="32" y="32"/>

  <Frame name="MyFrame">
    <Size x="200" y="200"/>
      <Slider name="$parentSlider" inherits="MySlider_Template">
            MyFrameSlider_OnValueChanged(self, value, userInput)

This example creates a basic horizontal slider to be displayed in a frame. The slider is defined with textures in a template, and then used in "MyFrame" with an event hander for each slider value change.



The 'valueStep' and 'stepsPerPage' attributes control the value increments for actions on the slider bar, or any time the value for the slider is set. The 'valueStep' attribute along with 'minValue' and 'maxValue' controls the valid for the slider. If max/min are 1/10 with 'valueStep' as 1, SetValueStep(1.4) will actually set the value to 1. If max/min are 1.5/10.5 with 'valueStep' as 1, SetValueStep(1.9) will actually set the value to 1.5. When the slider 'thumb' is slid during user UI interaction, the 'thumb' will only move in 'step' increments.


The 'stepsPerPage' property in conjunction with 'valueStep' controls how much the value will change when a paging the slider, like when a user click on the 'bar' part of the slider. If 'valueStep' is 2 and 'stepsPerPage' is 3, then causing a 'page' increment action will increment the value 6 each time.


  • 'stepsPerPage' was added in 5.4.0