I’m working on a shader that has some properties that are range types. I want to add a input box to the slider so the current value of the slider can be seen while using the slider. How would one do this?
This is an example of a property:
You can do this by adding a “Text” under the “Handle Slide Area” > “Handle” of the Slider. Please see my custom slider below. I have added a text called “Charge Value”
I have named my Slider as “Battery”. It uses a Battery.png image as background. You can easily create the image using PowerPoint or any other application. Then I have created two more images: one for the red indication when battery charge is low and another for the regular indication.
You can slide the charge indicator to increase or decrease the charge smoothly. I have also added a text field to indicate the charge value in numbers. Please see the images below.
The Slider Script is attached to the Panel (Canvas) in which the Battery Slider resides. The variables are assigned as shown in the images below. The complete script is below.
using UnityEngine;
using UnityEngine.UI;
public class SliderScript : MonoBehaviour
{
public Slider battery;
public Image charge;
public Text chargeValue;
public Sprite indication, redIndication;
// Use this for initialization
void Start ()
{
// Indicate red if the charge is less than 10
if (battery.value < 10)
charge.GetComponent<Image> ().sprite = redIndication;
chargeValue.text = ((int)battery.value).ToString ();
}
public void OnSlide ()
{
if (battery.value < 10) {
charge.GetComponent<Image> ().sprite = redIndication;
}
if (battery.value >= 10 && battery.value < 50) {
charge.GetComponent<Image> ().sprite = indication;
charge.color = new Color32 (255, 200, 0, 255);
}
if (battery.value >= 50) {
charge.GetComponent<Image> ().sprite = indication;
charge.color = new Color32 (51, 255, 0, 255);
}
chargeValue.text = ((int)battery.value).ToString ();
}
}