The Slider control can be used to set a value between a minimum and maximum value. For example, Sliders can be used to set color values in a game tool.

Layout Requirements

The Slider control requires:

  • An object named ThumbInstance which implements the ButtonBehavior (is a Button)

Note that the current implementation of FlatRedBall.Forms only supports a horizontal slider, so the Gum component should be laid out such that the thumb can move left and right.

ThumbInstance and Container Relationship

The thumb represents the Slider’s Value. It can be moved by clicking + dragging the thumb or by clicking on the track (the thumb’s parent).

The thumb’s parent may be the component itself, or it may be a Container instance within the component.

A track parent of the thumb can be used to control the visual bounds of the thumb by placing a padding between the min/max values and the edges of the component.

X Origin and Thumb Position

The thumb’s minimum and maximum X position will be defined by its parent’s bounds. For example, the following diagram shows the minimum and maximum position of the thumb inside a Slider with no explicit track container:

Notice that the thumb’s width is not considered when setting the mins and maxes. The min and max positions can be made symmetric by changing the Thumb’s X Origin to Center. Furthermore, the edges of the thumb can be kept within the bounds of the component by adding a track. Otherwise, parts of the thumb may fall outside of the component where the clicks are ignored.

The following image shows the minimum and maximum position of a thumb using X Origin of Center and an explicit Track container:

Keep in mind that the track need not be centered inside the component. It can be offset to account for an asymmetric thumb, or to allow for additional visuals besides the track.

Minimum, Maximum, and Value

The Value variable represents the current value in the scroll bar, which falls between the Minimum and Maximum values inclusively.

By default there is no visual representation of the value, so it can be printed out to screen using the FlatRedBall Debugger. The following code example shows how to set a a Slider to display values between 0 and 100, and to output them in real time.


The ValueChanged event is raised whenever the Value property is changed on a slider. The ValueChanged event enables writing logic to respond to the changed slider only when the value changes.

The FlatRedBall Debugger.CommandLineWrite method is used to display the value when it changes.


TicksFrequency can be used to snap values rather than allowing every value between Minimum and Maximum. TicksFrequency is a numeric value specifying the snapping value. It only applies if IsSnapToTickEnabled is set to true.

The following code can be added to the example above to snap the values to whole numbers:


If IsMoveToPointEnabled is set to true then clicking on the track will move the thumb to the clicked point, rather than moving the thumb up or down the Slider by the LargeChange value.