Page tree
Skip to end of metadata
Go to start of metadata

Introduction

A slider can be used to visually select (or display) a numeric value from a predefined range.

Usage

The slider's cursor can be moved either by dragging it, or by clicking in the empty areas next to it, or by pressing the movement arrows at the ends of the slider.
The minimum and maximum values (the "range") are defined via sliderSetRange, and the step size at which the cursor moves (its "speed") is defined via sliderSetSpeed.

Related commands: Interactions - User Dialogs - Sliders

Demo mission: LoadingScreen.zip

Graduated Slider

This slider type shows a line with graduations (the number of graduations shown depends on the width of the slider, not on its range). Clickable arrows are shown at the left and right side of the slider, and a draggable indicator at the bottom shows the current "value" of the slider. The lowest range value is at the left, and the highest at the right.
This slider can also be oriented vertically (via the 'style' property), in which case the lowest value is at the top.

Properties

Only properties unique to this control type are listed. For general properties, see the Properties page.

Properties
NameTypeDefaultRemarkScript
typeInteger (constant)-must be 3 (or CT_SLIDER , if using constants)-
styleInteger (constant)-Orientation of slider. Horizontal: 1024 (0x400, SL_HORZ), vertical: 0 (SL_VERT).-
colorColor-Color of all slider elements (lines & arrows).ctrlSetForegroundColor
colorActiveColor'color'Color of the slider arrows (left, right, bottom) if control has focus. Overrides the 'color' setting.ctrlSetActiveColor

Example

class SLIDER {
    idc = 10000; 
    type = CT_SLIDER; 
    style = SL_HORZ; 
    x = 0.4; y = 0.2; 
    w = 0.3; h = 0.025; 
    color[] = { 1, 1, 1, 1 }; 
    coloractive[] = { 1, 0, 0, 0.5 };
    // EventHandler to update the slider via the mouse wheel 
    onMouseZChanged = "_step = (sliderSpeed (_this select 0)) select 1; _dir = if (_this select 1>0) then {1} else {-1}; (_this select 0) sliderSetPosition (sliderPosition (_this select 0) + _step*_dir)"; 
};


Bar Slider

Since V2.05 a second type of slider is available that, instead of showing a graduated scale, displays either a solid block of color or images - for the slider, its background, and the increase/decrease buttons at the left and right.

Properties

Only properties unique to this control type are listed. For general properties, see the Properties page.

Properties
NameTypeDefaultRemarkScript
typeInteger (constant)-must be 43 (or CT_XSLIDER , if using constants)-
styleInteger (constant)-Orientation of slider. Can only be 1024 (0x400, SL_DIR).-
colorColor-Color of all slider elements (background & buttons) when not active.ctrlSetForegroundColor
colorActiveColor'color'Color of all slider elements (background & buttons) when active. Overrides the 'color' setting.
The alpha value of the slider itself is always 1, so when using solid colors for the slider and background the alpha value defined here should be set to something less than 1, in order to be able to distinguish the slider.
If using images for the slider/background, then 'color(Active)' should be white {1,1,1,1}; otherwise the images will be tinted with the colors specified.
ctrlSetActiveColor
arrowEmptyString-Texture (JPG, PAA or Procedural Textures) to display the for the decrease/increase buttons next to the slider, when neither button is pressed. The image specified is mirrored horizontally for the right button.-
arrowFullString-Image to display the for the decrease/increase buttons, when a button is pressed. Otherwise same specs as 'arrowEmpty'.-
borderString-Texture (JPG, PAA or Procedural Textures) to use for the slider background.-
thumbString-Texture (JPG, PAA or Procedural Textures) to use for the slider itself (the image will be stretched or compressed, to reach the width that represents the current slider value).-

Example

class SLIDERX {
    idc = 10000; 
    type = CT_XSLIDER; 
    style = SL_DIR; 
    x = 0.4; y = 0.2; 
    w = 0.4; h = 0.05; 
    color[] = {1, 1, 1, .4};                    // color to use when slider isn't active
    colorActive[] = {1, 1, 1, 1};               // color to use when slider is active
    arrowEmpty = "img\arrow_left_ca.paa";	// button image shown left & right, when not pressed
    arrowFull = "img\arrow_left_full_ca.paa";	// button image shown left & right, when pressed
    border = "img\sunshine.jpg"; 	        // image (or texture) for slider background 
    thumb = "img\clouds.jpg"; 		        // image (or texture) for slider 
};