A slider item is used to set a cvar to any one of a range of values. They use predefined graphics to display the slider background and the thumb, which can be moved using the mouse or keyboard. The item "remembers" the value of the cvar and sets the thumb to the correct location when the item is first drawn. Any changes to the thumb position by the user are transmitted to the cvar so it always contains the updated value.
When the program is run it loads (or attempts to load) a set of default graphics to use for the slider. See Gathering the Assets for more detail on the default graphics. The default graphics used by Team Arena look like :
 |
 |
slider2.tga |
sliderbutt_1.tga |
The slider background is, by default, 96x16 so slider2.tga (which is 128x16) is squished to fit this area. The same applies to the thumb, which is 12x20 by default, while sliderbutt_1.tga is 16x32.
To create a slider item you must set the type to ITEM_TYPE_SLIDER and assign a cvar to the item to hold the slider value.
itemDef
{
name brightness
type ITEM_TYPE_SLIDER
cvarfloat "r_gamma" 1 0.5 2
rect 99 70 128 16
visible MENU_TRUE
}
The cvarfloat command assigns the cvar "r_gamma" to this item, as well as setting the minimum value of the slider to 0.5 and the maximum to 2. If the initial value of "r_gamma" is outside this range then it is set to 1. The minimum size of the item's window area should be 96x16. If the window is larger the slider size is unchanged. Regardless of the height of the window, the slider background will be drawn right at the top and the thumb will be centered vertically on the background. This will leave 2 pixels of the thumb at the top outside the item window. When the slider receives the focus the thumb is replaced with the "selected" thumb graphic. By default this the same graphic as the normal thumb so no change will be seen.
If you want to, it is possible to fill the window area with color or use a background graphic. In general though, this doesn't look too good as the slider background is not centered in the box and the thumb projects over the top. It is far better to use another item, defined before the slider item, to display a background that is positioned to look nice.
itemDef
{
name sliderBar
style WINDOW_STYLE_FILLED
rect 95 64 104 26
backcolor 0 0 .75 .25
border WINDOW_BORDER_KCGRADIENT
bordercolor 0.5 0.5 0.5 1
bordersize 1
visible MENU_TRUE
decoration
}
itemDef
{
name brightness
type ITEM_TYPE_SLIDER
cvarfloat "r_gamma" 1 0.5 2
rect 99 70 96 16
visible MENU_TRUE
}
What we have here is an item that displays a colored box, with borders, underneath the slider item and is positioned so that the slider is centered in both directions.
Another feature of slider items is their ablility to display text to the left of the slider graphic. This allows you to place a description of the slider in the same item and still have it positioned correctly. The slider graphic will be drawn 8 pixels to the right of the end of the text. You use the normal text commands to place the text in the item window and do the horizontal and vertical alignments. The alignment is applied to the text only, not the text and slider combined. Therefore, if you set the horizontal text alignment to centered, the text will be centered in the window and the slider drawn to its right. Just remember that regardless of the text's vertical alignment, the slider background will still be drawn at the top of the item window.
itemDef
{
name brightness
type ITEM_TYPE_SLIDER
cvarfloat "r_gamma" 1 0.5 2
rect 99 70 256 20
visible MENU_TRUE
text "Brightness:"
textalign ITEM_ALIGN_RIGHT
textalignx 128
textaligny 16
textscale .333
forecolor 1 1 1 1
}
Because we are displaying text as well as the slider, we have changed the size of the item window to 256x20. This keeps any part of the slider from hanging over the window edge. To center the text and slider combined in the window we use a horizontal text alignment of ITEM_ALIGN_RIGHT and an offset of 128 (from the left box side). This will place the right side of the text at the middle of the box. The vertical alignment is such that the text's bottom will be at the bottom of the slider background. When the item receives the focus the text will be colored the focus color and will pulse slowly.
The sensitivity of the slider is a direct result of the width of the slider, which is fixed at 96. Since you can only move the thumb across this width, the change in the slider value per pixel movement is 1/96 of the range. If you require more sensitivity than that then the width of the slider must be changed. This can only be done globally and will affect all sliders in all menus. To change the size (width and height) of the slider from its default 96x16 you add these commands to the assetGlobalDef section of the menu script. This is usually in the main menu but you may have placed it elsewhere.
sliderWidth <new width>
sliderHeight <new height>
where <new width> is the desired width of the slider and <new height> is the desired height of the slider. You do not need to define these as a pair, as it is possible to change only one value and leave the other at the default. The slider background will be stretched/squashed to fit the new size. If we wanted the slider to be longer, for more sensitivity, we would add this to the assetGlobalDef section :
sliderWidth 128
which gives us a slider that is 128x16 in size. When doing this remember to adjust the item window size to match the changes in the slider size.
You can also change the size of the thumb in much the same way. The following commands are, again, added to the assetGlobalDef section to make the size change. Again, if desired, only one value needs to be modified.
sliderthumbWidth <new width>
sliderthumbHeight <new height>
where <new width> is the desired width of the thumb and <new height> is the desired height of the thumb. If we wished a narrower thumb we would add this to the assetGlobalDef section :
sliderthumbWidth 8
which gives a thumb that is 8x20 in size. Be aware that, regardless of the height of the thumb, it is drawn starting 2 pixels above the top of the slider background. For symmetry sake, the thumb height should be 4 pixels larger than the height of the slider background.
If you wish to use different graphics for the slider, to match your menu style, you have two choices. The first choice is to replace the default graphic files with your own files. This is the standard method of changing graphics and you can even change the sizes (see above) to match the new files. The big disadvantage is that you have to replace files every time you wish to test out another slider design. The better method is to define the slider graphics in the assetGlobalDef section. Then all you have to do is change the menu script to change the graphics. It also gives you the opportunity to define the "selected" thumb graphic so you can see when the slider receives the focus. The commands you use are :
sliderBar <name>
sliderThumb <name>
sliderThumbSel <name>
where <name> is the path and name of the graphic. Let's see how this works in real life. Here are the slider graphics we will use to make FAKK 2 style sliders.
 |
 |
 |
| slider.tga |
slider_thumb.tga |
slider_thumb_sel.tga |
In your assetGlobalDef section add the following :
sliderBar "ui/assets/slider.tga"
sliderWidth 158
sliderHeight 16
sliderThumb "ui/assets/slider_thumb.tga"
sliderThumbSel "ui/assets/slider_thumb_sel.tga"
sliderthumbWidth 8
sliderthumbHeight 20
This redefines the slider graphics and sizes so the background graphic is slider.tga, sized 158x16, and the thumb is slider_thumb.tga, sized 8x20. The "selected" thumb is slider_thumb_sel.tga. Remember, this will affect all sliders in all menus. Now for the slider item.
itemDef
{
name brightness
type ITEM_TYPE_SLIDER
cvarfloat "r_gamma" 1 0.5 2
rect 99 70 158 16
visible MENU_TRUE
}
Not really different from what we defined previously, except that the item window is longer (158 vs 128) so the slider will fit inside. You can have text in the item and it will display exactly as it did before. Just remember to make the item window longer to accommodate the longer slider.
Like buttons, sliders can have focus sound and focus text. It is implemented exactly like it is done for buttons. See here of details.
