Construct 3 icon

Construct 3


Slider bar

Ashley's avatar
Construct Team Founder
Published 24 Aug, 2017
479 words
~2-3 mins

The Slider bar object provides a simple form control allowing the user to pick a value between a minimum and maximum by moving a slider along a bar.

Slider bar control

Form controls are actual HTML elements floating above the game canvas in the HTML page. Therefore, nothing can be displayed on top of a form control, apart from other form controls.

Form controls position themselves according to the layer parallax, scale and so on. However they are not truly "in the game" (since they float above), so it is recommended to avoid using scrolling, parallax and layer scaling with form controls, otherwise the end result can feel unnatural.

Slider bar properties


The lowest value that can be picked, when the slider is all the way to the left.


The highest value that can be picked, when the slider is all the way to the right.


The increment of possible values. For example if the step is 10, then the slider will jump in units of 10 as it is moved, and only a multiple of 10 can be chosen as a value.


An optional tooltip to show while hovering the mouse over the control.

Initially visibile

Whether the control is initially visible or invisible in the page.


Whether the control is initially enabled and usable, or disabled so that it cannot be interacted with.

ID Optional

An optional id attribute for the element in the DOM (Document Object Model). This can be useful for accessing the element's value from external scripts, or styling with CSS in the HTML page.

Slider bar conditions

Compare value

Compare the currently chosen value from the slider bar.

On changed

Triggered when the user changes the chosen value on the slider bar.

On clicked

Triggered when the user clicks the slider bar.

Slider bar actions

Set CSS style

Set a CSS (Cascading Style Sheets) style on the slider element. This can be used to alter the appearance using the browser's styling features.

Set enabled

Enable or disable the control. If disabled, it cannot be interacted with.

Set maximum

Set the maximum value that can be chosen from the slider bar.

Set minimum

Set the minimum value that can be chosen from the slider bar.

Set step

Set the increment step of the slider bar.

Set tooltip

Set the tooltip that appears when the mouse hovers over the slider bar.

Set value

Set the currently selected value of the slider bar. This must be between the currently set minimum and maximum values.

Slider bar expressions


Return the currently set maximum slider value.


Return the currently set minimum slider value.


Return the currently set slider step value (increment).


Return the current value chosen by the user, between the minimum and maximum values.