Create UI Slider With Text That Shows Percentage Value Using C# Script In Unity 3D

Introduction

In this article, you will learn how to create a UI slider with text that shows percentage value using C# Script in Unity 3D.

Prerequisites

  • Unity Environment version 2018.4.25f1

Create the project

Create UI slider with text that shows percentage value  using C# Script in Unity 3D

Create the UI Text (user interface) in unity 

First, create new UI Text if there is no canvas. It is created automatically. Then, click on the "GameObject" menu in the menu bar.

Select UI and pick the "Text" option.

Create UI slider with text that shows percentage value  using C# Script in Unity 3D

Position it in the right middle holding out + Shift keys change its text field modify its font size set overflow change.

Create UI slider with text that shows percentage value  using C# Script in Unity 3D

Right-click on the canvas and create a new UI slider.

Select UI and pick the "Slider" option. 

Create UI slider with text that shows percentage value  using C# Script in Unity 3D

Select UI slider scale model in the scene view.

Create UI slider with text that shows percentage value  using C# Script in Unity 3D

Create a C# Script

Right-click on Assets.

Select Create >> C# script.

Create UI slider with text that shows percentage value  using C# Script in Unity 3D

Rename the script as percentage show value.

Create UI slider with text that shows percentage value  using C# Script in Unity 3D

Double click on the MoveScript script. The MonoDevelop-Unity editor will open up.

Copy and paste the below code,

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class PercentageShowValue: MonoBehaviour {
  Text percentageText;
  void Start() {
    percentageText = GetComponent < Text > ();
  }

  public void textUpdate(float value) {
    percentageText.text = Mathf.RoundToInt(value * 100) + "%";
  }
}

Save the program.

Drag and drop the Percentage ShowValue onto the Text.

Create UI slider with text that shows percentage value  using C# Script in Unity 3D

Now the last thing we need to do is simply hook up our Slider to the function that we just created.

To do that let's select the button and scroll down where it says on click "this is unity".

We can add an action to this event by hitting the plus button.

Create UI slider with text that shows percentage value  using C# Script in Unity 3D

We need to select an object that will be our text.

Let's drag that in there, now we can go and find our PercentageShowValue script here we will create a function call textUpdate.

Create UI slider with text that shows percentage value  using C# Script in Unity 3D

Let's hit play and see how it works.

Create UI slider with text that shows percentage value  using C# Script in Unity 3D

Summary

I hope you understood how to create a UI slider with text that shows percentage value using C# Script in Unity 3D.