UI Sliders

Health bars and volume controls.

8 min read Intermediate Updated 2026-07-01 v2.0 ~23 min to complete

Introduction

Health bars and volume controls. This page provides a complete guide to ui sliders in Appley, covering everything from setup to advanced techniques.

UI is a core area of Appley. Understanding ui sliders will help you build better games and use the platform more effectively. This documentation is designed for intermediate level users.

Requirements

Before working with ui sliders, ensure you have the following:

An Appley project
UI assets (buttons, icons, fonts)
Understanding of screen layout and anchoring
Basic knowledge of responsive design

Estimated Completion Time

This guide takes approximately 23 minutes to complete. The estimated reading time is 8 minutes. Difficulty level: Intermediate.

Step-by-Step Guide

Follow these steps to work with ui sliders in your Appley project:

Open the UI Designer

Switch to the UI tab in Creator Studio to access the UI design tools.

Create UI element

Add a ui sliders element to the canvas from the UI palette.

Configure properties

Set text, color, size, and interaction properties in the inspector.

Anchor and layout

Position the element using anchors and layout groups for responsive design.

Script interactions

Use the UI API to update and respond to the ui sliders element during gameplay.

FluxScript Example

Below is an Appley Scripting (Flux Scripting) code example demonstrating ui sliders:

UI Sliders — Appley Scripting

// UI — UI Sliders
on start {
  ui.show("hud")
  ui.setBar("healthBar", 1.0)
  ui.setText("scoreLabel", "Score: 0")
}

on update(dt) {
  healthPercent = player.health / player.maxHealth
  ui.setBar("healthBar", healthPercent)
  ui.setText("scoreLabel", "Score: " + score)
  if player.tookDamage {
    ui.flash("damage", 0.3)
  }
}

on event("gameOver") {
  ui.show("gameOverPanel")
  ui.setText("finalScore", "Final: " + score)
}

Node Script Example

The same logic can be implemented using Node Scripting. Here is the equivalent node graph:

UI Sliders — Node Graph

[On Update] ──► [Get Health %] ──► [Set Bar: healthBar]
            ──► [Get Score] ──► [Set Text: scoreLabel]
            ──► [Branch: tookDamage] ──► [Flash: damage]

[On Event "gameOver"] ──► [Show: gameOverPanel]

Interchangeable Systems

FluxScript and Node Scripting compile to the same runtime. You can mix both in a single project — use whichever is best for each task.

Common Mistakes

Avoid these frequent mistakes when working with ui sliders:

Not anchoring UI elements to screen edges

Use anchors so UI adapts to different screen sizes.

Hardcoding pixel positions

Use relative positioning and layout groups for responsive UI.

Creating too many UI panels at once

Show/hide panels as needed; dont render hidden UI.

Not handling safe areas on mobile

Use safe-area insets to avoid notch and home indicator overlap.

Troubleshooting

If you encounter issues with ui sliders, try these solutions:

UI elements are off-screen on mobile

Use safe-area insets. Anchor elements to screen edges with offsets.

UI buttons dont respond to touch

Ensure raycast target is enabled. Check that the canvas has a raycaster.

Text is blurry on high-DPI screens

Enable high-DPI rendering. Use SDF fonts or increase font size.

UI overlaps in landscape mode

Use responsive layout groups. Test in both orientations.

Performance Tips

Optimize your use of ui sliders with these performance tips:

Use layout groups (horizontal, vertical, grid) for auto-arranging UI elements.
Anchor UI to screen edges with safe-area offsets for mobile compatibility.
Pool UI elements (tooltips, damage numbers) instead of creating/destroying per event.
Use SDF (Signed Distance Field) fonts for crisp text at any size.

Explore these related documentation pages:

UI Overview

Canvas System

UI Buttons

Introduction to Appley

Getting Started