Virtual Slider

Virtual Slider

Add a resizable, skinnable slider control to your Construct 3 layouts. Configure its value range and input behavior in the Properties Bar, edit its complete visual skin in the Construct Image Editor, and use built-in conditions, actions, and expressions to connect it to your project logic.

Key Features

• Editable three-frame skin - Use one 384 x 128 image containing separate 128 x 128 frames for the track, filled track, and handle.
• Resizable track and fill - Independent 9-slice margins preserve the track and fill borders when the object is resized.
• Configurable handle - Set the displayed handle width, height, and movement range independently from the track.
• Flexible values - Define the minimum, maximum, step, initial value, and enabled state.
• Consistent value handling - Values are clamped to the configured range and snapped to a positive step.
• Multiple input methods - Supports mouse dragging, touch input, arrow keys, Home, and End.

Events and Project Control

• Trigger events when the slider value changes.
• Test whether the slider is enabled.
• Set the value, range, step, or enabled state at runtime.
• Increase or decrease the current value with a single action.
• Read the current value, minimum, maximum, step, percentage, and enabled state with expressions.

Editable Visual Workflow

Open Edit slider skin from the Properties Bar or double-click the object in the Layout View. The first frame defines the base track, the second defines the filled portion, and the third defines the handle. The track and fill each provide independent source-pixel 9-slice margins, while the handle is scaled to its configured display size.

Handle Positioning

Handle range start and end properties map the handle center to exact positions along the full track. Use the default 0 to 100 range for edge-to-edge movement, or choose custom endpoints when the visual design needs inset or restricted travel.

Compatibility

• Requires Construct 3 r469 or newer.
• Uses Construct Addon SDK v2.
• Uses Construct DOM-side input support for mouse, touch, and keyboard interaction in browser-based previews and exports.

What's Included

• The installable Virtual Slider Construct 3 addon.
• A default editable three-frame slider skin.
• Editor properties and runtime conditions, actions, and expressions for slider control.

Skin Image Requirement

Keep the editable skin image exactly 384 x 128 pixels. Each of its three frames must remain 128 x 128 pixels and stay arranged from left to right as track, filled track, and handle.