Did you ever come across the situation where you needed to make use of a rating bar, but the PowerApps provided star rating didn’t suffice? If that’s the case, I will guide you through the steps to create one without one single line of ‘nasty’ code.
Do you remember this blog post which outlined the steps to create a custom rating bar? So I thought, why not try the same approach but with a little twist.
One we’ve followed through al the steps, the end result should be like this:

First we need to create the Heart shapes. For this I didn’t have too look very far. I simply used PowerPoint Icons! PowerPoint offers a whole set of icons:

In PowerPoint I formatted the 2 icon shapes:
- One Heart with the red Solid Fill
- One Heart with the red Outline and No Fill

Once we have formatted the icon shapes in PowerPoint, we save them as PNG or JPEG images on a preferred location. I have to say that I try to use PNG images as much as possible, as these are very small in size. Import these into PowerApps:

Next we build the layout in PowerApps. The layout consists of:
- Top Layer: Gallery Control with Image Control
- Middle Layer: Rectangle Shape
- Bottom Layer: Gallery Control with Image Control
- Slider Control (Minimal Value 1, Maximum Value 10)
Once these are in place, you should have the following layout:

Once we move the slider, the Middle Layer (rectangle shape) should behave as follows:

The next step is moving the layers on top of one another. Once we move the slider, you should have the following effect:

The final step is setting the Middle Layer Fill equal to Screen Fill. This will result in the following effect:

So there you have it! You can use the same approach in other scenario’s.