
How it works...
You hid the Handle Slide Area child so that the UI Slider is for display only, and cannot be interacted with by the user. The Background color of the UI Slider was set to red, so that, as the counter goes down, more and more red is revealed – warning the user that the time is running out.
The Fill of the UI Slider was set to green, so that the proportion remaining is displayed in green – the more green displayed, the greater the value of the slider/timer.
An instance of the provided CountdownTimer script class was automatically added as a component to the Slider via [RequireComponent(...)].
The Awake() method caches references to the CountdownTimer and Slider components in the countdownTimer and sliderUI variables.
The Start() method calls the SetupSlider() method and then resets the countdown timer to start counting down from 30 seconds.
The SetupSlider() method sets up this slider for float (decimal) values between 0.0 and 1.0.
In each frame, the Update() method sets the slider value to the float returned by calling the GetProportionRemaining() method from the running timer. At runtime, Unity adjusts the proportion of red/green displayed in the Slider to match the slider's value.