Unity allows us to add lower and upper bounds to sliders in a very simple way. Inside the Slider (Script) component, there are two variables named Min Value and Max Value. If we take the slider from the previous recipe and change the values of these variables, we'll see that we can drag the handle of the slider to the end and the value has an upper bound, as we can see in the following screenshot:
In this recipe, we will write a script to block the handle of the slider as well in order to make the player perceive a real upper or lower bound.
- So that we don't recreate another slider, we can take the one from the previous recipe; thus, we can also see the value as a percentage. Otherwise, simply right-click on the Hierarchy panel and then click on UI | Slider.
- For the next step, we need to create our script on the slider. So, click on Add Component | New Script, name it UpperAndLowerBoundsForSlidersScript, and then click on Create and Add.
- Now, double click on the script in order to edit it. As usual, we need to add the
using UnityEngine.UI;statement at the beginning of the script so that we can handle UI elements within the script. We can also add the following line before the class:[RequireComponent(typeof(Slider))](without the semicolon at the end). By doing this, the script requires a Slider (Script) component attached to the same game object of it in order for it to work. In fact, if it is not present, Unity will add it for us. - We need a private variable to keep track of the Slider (Script) component without seeking it every time that we want to check its upper and lower bounds. We also need two public variables. They can be set in the Inspector or via the script for the lower and the upper bound, respectively. So, we can write these lines:
private Slider slider; public float lowerBound; public float upperBound;
- In the
Awake()function, we have to link theSliderto our variable and then carry out our first check. To improve performance, future checks will be done only if the value ofSliderchanges. We can perform our check by calling thecheckBounds()function, which we will write in the next step. Thus, we can write theAwake()function as follows:void Awake () { slider = GetComponent<Slider> (); checkBounds (); } - In the
checkfunction, we have to ensure that the value ofSlideris between the lower bound and the upper bound. If not, we have to change its value to the closer bound, like this:public void checkBounds () { if(slider.value>= upperBound){ slider.value = upperBound; } else { if(slider.value<= lowerBound){ slider.value = lowerBound; } } } - Save the script and come back to Unity from MonoDevelop. As in the previous recipe, we can see this at the bottom of the Slider (Script) component, the On Value Change (Single) panel. By clicking on the + sign in the bottom-right corner of the panel, we add a new element (the second one if you took the slider from the previous recipe).
- Next, we have to drag the Slider itself into the object variable. Now the drop-down menu should be enabled, so click on it and select UpperAndLowerBoundsForSlidersScript | checkBounds. In this way, when the value of the slider is changed, the
checkBounds()function from our script is called, and it will check whether the new value of the slider is inside the bounds. If we have taken the slider from the previous recipe, we should see this:
- Finally, we can press the play button and perform a test to see whether everything works as it should.
Since Unity doesn't allow us to block the handle of the slider directly, we need a script that controls it within the bounds. In fact, every time the OnValueChange event occurs, the value of the slider is passed to our script. This checks whether the slider value is between the bounds. If it isn't, the script changes the value of the slider to the closest bound limit. For example, if the player tries to move the slider further than the bound, our script will make the slider come back to that bound. Finally, our script stores the bound limits in a couple of public variables so that we can change them during the gameplay with other scripts. This is useful because the player will perceive this as a block of the slider. Therefore, we can change the bounds to give more power to the player over time.
The following sections will give us some interesting suggestions on how to improve our Slider Shower.
Sometimes in games, we not only want to block the slider by creating bounds, but also to make the player feel the bounds. One way of doing this is by changing the color of the Slider Shower. To achieve this, we need to modify the script slightly. First, we should add the reference to the Slider Shower inside our script. Thus, we can add a new public variable into our script:
public Text uiText;
This will store the Text (Script) component attached to Slider Shower. Furthermore, we need to change the checkBounds() function in the following way:
public void checkBounds () {
if(slider.value>= upperBound){
slider.value = upperBound;
uiText.color = Color.red;
} else {
if(slider.value<= lowerBound){
slider.value = lowerBound;
uiText.color = Color.red;
}
}
uiText.color = Color.white;
}By doing this, if a bound is reached, we change the color of Slider Shower to red. Otherwise, we can assign the color white to it. Finally, we need to drag and drop Slider Shower into the uiText variable of our script in the Inspector.
Sometimes, it's better to express the parameters in a different way, especially if designers have to tweak them. In fact, another way might be more understandable and comfortable. For example, instead of expressing a result in decimal points, we can display it more simply as a percentage. Here, you are going to learn how to express bounds as a percentage within the Inspector; this is easy to understand for designers. Therefore, let's start changing our script a little.
First of all, we need to change our variables. Consider these lines:
public float lowerBound; public float upperBound;
Replace them with the following lines:
[Range(0,100)] public int lowerBound; [Range(0,100)] public int upperBound;
In this way, we have changed the type of our variable in int and added a Range attribute in order to limit the possible values (between 0 and 100) that can be set in the Inspector.
Now, since the slider value is a float between 0 and 1, we also need to convert the percentage value into a decimal one in the checkBounds() function. In fact, if we divide the value by 100f, we obtain the decimal value. Therefore, we can rewrite the entire function in the following way:
public void checkBounds () {
if(slider.value>= upperBound/100f){
slider.value = upperBound/100f;
} else {
if(slider.value<= lowerBound/100f){
slider.value = lowerBound/100f;
}
}
}As in the original function, we need to check whether the slider is exceeding the bounds, and if so, restore it to the closest bound.
If we want to limit the possible values that can be set in the Inspector, we have to add a Range attribute to our variables. This prevents designers or us from setting a wrong number.
If we have expressed the value as a percentage, we can add the [Range(0,100)] line before our variable in this way:
[Range(0,100)] public int lowerBound; [Range(0,100)] public int upperBound;
In fact, they are int, and the percentage can be a number between 0 and 100.
Otherwise, if we still express the bounds as floats in the Inspector, the Range attribute is [Range(0,1)]. Therefore, we can write the following:
[Range(0,1)] public float lowerBound; [Range(0,1)] public float upperBound;
In this case, the value of our variable can be a float number between 0 and 1.