What is Slider?
The Slider control allows the user to adjust values within a predetermined range using the mouse.
We can right-click on the Hierarchy view -> UI ->Slider to create a slider.
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
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
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
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.
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.
Then create an Image control named Handle under this empty game object as a slider, set it to black, and adjust the size accordingly.
Add a Slider component to this empty game object.
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.
We first adjust the Value to the maximum.
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;
}
}