UI.Image dynamic tile width

I would like to create a healthbar similar to the one in League of Legends - https://i.ytimg.com/vi/talSIYq4Xbg/hqdefault.jpg

For that, having a colored square with black border seemed to be like a good idea. I can just set UI.Image Image Type to tiled and… it >almost< works. The problem is, I am unable to dynamically change the width of the tile - I would like each tile to represent 100 HP for example, so in case a character’s health is increased, I would like to have more tiles on the same image.

I tried using a material with tiling on SpriteRenderer, but Sprite Renderer seems to ignore the Sprite borders, making the borders stretch.

Any suggestions how this can be done properly?

I think you might be able to use this tutorial to help you, well I think this is what you mean: Unity 5 Tutorial: Heart health - like in Zelda or Minecraft C# - YouTube

p.s I would supply code and try to help a little more but I’m still learning! All the best!