Sometimes you are going to run into things that are fairly easy to do, but for some reason your code just won’t work. This was the case for me here. It really wasn’t that hard to implement this but for some reason I was getting error after error after error.
I’m going to be honest here — I really don’t know how I fixed it.
Another lesson for you — don’t ask questions. Just be happy with it :). I did a lot of changing from if statements to new methods, etc. Then, it just clicked.
Now you know I usually provide a lot of gif’s so you can see how things are done. I can’t do that here. There was just too many restarts and changes to record what actually worked. So I’m going to try to explain as best I can!
So first off you are going to create an image (call it border) inside of your canvas and make it the size of the slider you want. Then create another image and make it the same size, call this fill. Change the color of this to red — and make sure you have it set in the hierarchy so it is above the border. The border should be white, that way when the red slides it will show the background.
Now with that done, add an empty object and name it ThrusterBar. Put both images inside of this container. Add a Slider Componenet to the ThursterBar object and make sure the interactable check box is unchecked, transition to none and navigation to none. By doing those things you make sure it’s just a static object and you can’t interact with it.
Once we have that down we can create the code. First off, create a new C# script and attach it to the ThrusterBar object. Then open it and…
Now first, make sure you add the UI library at the top as we will be using the UI during this.
Next we just want to get access to the Slider component and giving it the name slider.