Learning Unity's UGUI (7): Slider (Slider)

What is Slider?

The Slider control allows the user to adjust values within a predetermined range using the mouse. Insert image description here

We can right-click on the Hierarchy view -> UI ->Slider to create a slider.
Insert image description here
The picture above is the structure of Unity’s built-in Slider. Of course, we can also create a more personalized Slider ourselves. But before that, you need to understand the Slider component.

Properties and functions

Insert image description here

Attributes	Function
Interactable	Controls whether the component accepts input. If it is not checked, it cannot be slid.
Transition	Used to control the way Slider responds to user operations
Navigation	How to implement keyboard navigation used to control UI controls
Fill Rect	A graphic that fills the control area.
Handle Rect	Slide the "Processing" section of the graphic, the slider on the slider.
Direction	The direction in which the slider's value increases when the slider is moved, options include Left To Right, Right To Left, Bottom To Top, and Top To Bottom.
Min Value	Minimum value for slider sliding
Max Value	The maximum value of the slider sliding
Whole Numbers	Whether the slider value is limited to an integer value
Value	The current value of the slider. When you slide the slider, the Value value will also change. vice versa.

event

Attributes	Function
On Value Changed	Called whenever the slider's value is changed. Values of type float will be passed regardless of whether the Whole Numbers property is enabled.

Example

Insert image description here

Note: Handle can be removed, it is not necessary. After removing the adjustment, we can control the movement of the slider through code.

Slider structure

Insert image description here

From the picture above, we find that Unity's built-in Slider mainly has three parts, one is the bottom layer Background, then Fill, and then Handle.

Next we implement a slider by ourselves.

First we create an empty game object under Canvas.
Insert image description here
Create an Image control under this empty game object and rename it to Background, and adjust the width and height as the underlying background of the slider.

Then create an Image control named Fill in this empty game object as the filled background, set the color to red, and adjust the size.
Insert image description here

Then create an Image control named Handle under this empty game object as a slider, set it to black, and adjust the size accordingly.
Insert image description here

Add a Slider component to this empty game object.
Insert image description here

And set the value for the component. Here you will find that Fill and Handle in the Scene view are deformed. At this time, you need to adjust their size.
Insert image description here

We first adjust the Value to the maximum.
Insert image description here
Then adjust Fill and Handle. This can be considered completed. After running, you can find that you can slide and adjust the value of Value accordingly. Of course, this is relatively simple, we can add pictures to these components to beautify them.

Note: Our Handle above is not necessary and does not need to be added. We can control the movement of the slider through code.

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

public class SliderController : MonoBehaviour {
    
    

    private Slider silder;

    void Start() {
    
    
        silder = GetComponent<Slider>();
    }

    void Update() {
    
    

        silder.value+= 0.1f * Time.deltaTime;
    }

}

Insert image description here