Slider and progress bars in Unity

Introduction

Sliders and progress bars help show or change values visually. They make it easy to see progress or adjust settings.

To show how much of a task is done, like loading a game level.

To let players adjust volume or brightness with a slider.

To display health or energy levels in a game.

To show download or upload progress.

To control any value smoothly between a minimum and maximum.

Syntax

Unity

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public Slider slider;
    public Image progressBar;

    void Start()
    {
        slider.minValue = 0;
        slider.maxValue = 100;
        slider.value = 50;
    }

    void Update()
    {
        // Update progress bar fill based on slider value
        progressBar.fillAmount = slider.value / slider.maxValue;
    }
}

Sliders let users pick a value by dragging a handle.

Progress bars usually fill an image to show progress visually.

Examples

Set slider range from 0 to 10 and start at 5.

Unity

slider.minValue = 0;
slider.maxValue = 10;
slider.value = 5;

Fill progress bar to 75%.

Unity

progressBar.fillAmount = 0.75f;

Run code when slider value changes.

Unity

slider.onValueChanged.AddListener(value => {
    Debug.Log($"Slider value changed to {value}");
});

Sample Program

This program shows a health bar using a slider and a fill image. When TakeDamage is called, it lowers health and updates the bar.

Unity

using UnityEngine;
using UnityEngine.UI;

public class HealthBar : MonoBehaviour
{
    public Slider healthSlider;
    public Image healthFill;

    void Start()
    {
        healthSlider.minValue = 0;
        healthSlider.maxValue = 100;
        healthSlider.value = 100; // full health
    }

    public void TakeDamage(float damage)
    {
        healthSlider.value -= damage;
        healthFill.fillAmount = healthSlider.value / healthSlider.maxValue;
        Debug.Log($"Health: {healthSlider.value}");
    }
}

Important Notes

Make sure the Image used for progress bar has its Image Type set to 'Filled' in the Inspector.

Sliders can be horizontal or vertical depending on your UI design.

Use slider.onValueChanged to react instantly when user moves the slider.

Summary

Sliders let users pick values by dragging a handle.

Progress bars show how much of a task or value is complete.

Use fillAmount on an Image to create a progress bar effect.