Using UI Slider to Create 5-Star Rating Element

An article by mgear

Steps

Download or generate star-icon (for example: https://tools.unitycoder.com/StarIconGenerator/ )
Set star image import settings to
- Texture Type: Sprite (2D and UI)
- Sprite Mode: Single
- Wrap Mode: Repeat
Create UI/Slider to your Canvas (Adjust size if needed)
- Set Slider Height to: 32 (width is default 160)
- Set Max Value to 5
- Enable [x] Whole Numbers (if you want full stars filled)
Select Background gameobject inside your Slider/ hierarchy
- Set RectTransform mode to Stretch (so that it fills slider area)
- Assign Star Image to background Image, Set Image Type: Tiled, set Color to Black
- Adjust Pixels Per Unit Multiplier, for example: 2 (so that you can see 5 stars)
Select Fill Area gameobject
- set RectTransform mode to Stretch and
Select Fill gameobject
- set RectTransform width to 0
- Assign Star image to Fill Image component, Set Image Type: Tiled
- Make Image color Yellow (if you want yellow stars)
- Adjust Pixels Per Unit Multiplier, for example: 2 (so that you can see 5 stars)
Select Handle Slide Area gameobject
- set RectTransform Left and Right to 0 (to completely use slider area)
Select Handle gameobject
- set RectTransform mode to Stretch Vertical and set pivot to 0.5
Test the slider, it should look similar to the one in this gif above