Skip to content

Normandy72/Unity-Sliders

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Instructions

Interactable Slider

  1. Create a Canvas (change a background color and add other elements you need).
  2. Add a Slider to the Canvas (you can check "Whole Numbers", change slider direction, min and max value, value at start as you need).
  3. Create script SliderController.
  4. Delete Start and Update methods.
  5. Create public method OnSliderChanged that takes one float parameter.
  6. Add field valueText and inside a new method assign it with method parameter.
  7. Inside Slider component add new script to events list and change method name.
  8. You can also make the slider prettier: change it Handle, Background and Fill area.

Progress bar (with buttons)

  1. Create a Canvas (change a background color and add other elements you need).
  2. Add a Button and a Slider to the Canvas (uncheck Interactable in Slider component or just delete Handle Slide Area).
  3. Create new script Progressbar.
  4. Create a variable that will hold a progress.
  5. Add slider reference.
  6. Create UpdateProgress public method.
  7. Increase progress value and set it as slider value;
  8. In Button register a new event from slider (drug slider into new event).
  9. In Progressbar script choose UpdateProgress() method.
  10. You can also create a second Button (Remove) and create a new method (RemoveProgress). After that register a new event from slider.

Timer

  1. Create a Canvas (change a background color and add other elements you need).
  2. Add Slider, change its color as you wish.
  3. Delete Handle Slide Area.
  4. Set slider to it max value.
  5. In Slider add TimerText to show time left.
  6. Create an empty GameObject (rename it to TimerController).
  7. Create a new C#-script (Timer).
  8. Add this script to TimerController.
  9. In the script add reference to Slider.
  10. Create public field for timer text.
  11. Create variable float maxTime (max game time).
  12. Create private bool stopTimer (we need to know when we stop the timer).
  13. In Start set stopTimer to false.
  14. In Start set timerSlider maxValue and value to maxTime;
  15. In Update create a new variable float time and set its value to maxTime - Time.time.
  16. In Update calculate a number of minutes that left.
  17. In Update calculate a number of seconds that left.
  18. Create string variable for correct time format.
  19. Set stopTimer to true if time <= 0.
  20. If !stopTimer - update timer value and timerText.text.

Circular Slider

  1. Create Canvas, change its background, set UI Scale Mode to Scale with screen size.
  2. Create Slider, delete Handle Slide Area, set Transition to None, uncheck Interactable.
  3. Rename slider background to OuterBorder.
  4. Create a new Sprite (Circle).
  5. Add circle to OuterBorder source image.
  6. Set Slider Width and Height to 160.
  7. Stretch OuterBorder, set buttom and top to 0.
  8. Stretch Fill Area, set left, top, right and bottom to 5.
  9. Add circle to Fill source image.
  10. Stretch Fill, set left, top, right and bottom to 0.
  11. Change Fill color, set image type to Filled.
  12. Dublicate OuterBorder, rename it to InnerBorder, set left, top, right, bottom to 20.
  13. Dublicate InnerBorder, rename to CenterArea and put into InnerBorder.
  14. In CenterArea set left, top, right, bottom to 5, change its color to main background color.

Mission Slider

  1. Create a Canvas, change background color.
  2. Add a Panel (rename to ContainerPanel), set Opacity to 0.
  3. Inside ContainerPanel create a new Panel (rename to MissionsPanel), resize it, change color or add sprite.
  4. Inside MissonsPanel create Button (rename it to MissionButton1), add Text (number 1).
  5. Duplicate this button 8 times.
  6. Duplicate MissionPanel, drop it to right.
  7. Add 2 Button for slider (Slide to right and to left).
  8. Create a new script MissionSlider, attach it to Canvas (or othr parent object).
  9. In script create field (reference to ContainerPanel).
  10. Create reference to all MissionsPanel.
  11. Create reference to right and left buttons.
  12. Create field int currentIndex.
  13. Create field float containerPositionX, initialize in Start method.
  14. Set up a iTween asset from assets store.
  15. Call MoveTo method through the code.
  16. In Unity attach events to buttons.

About

How to create different types of slider in Unity.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published