UX Patterns: NumericUpDown, Custom Rating and Gauge Controls
In this blog, I am going show how easy it is to build composite controls using the built-in controls that ships with PowerApps. We will build a numeric up/down, a custom rating control and a gauge control.
Download sample apps here
NumericUpDown
NumericUpDown control is spin box that displays numeric values. Building this control in PowerApps is pretty simple
Custom Rating Control
PowerApps ships with a standard Rating Control 
but say we wanted to build a rating control that supports half-stars or in our case here, half-hearts. You can easily achieve that in PowerApps as follow:
As you can see, we are exploiting the touch gesture of a slider which is set to be transparent. When a user clicks or swipe within the slider area, we change the width of the underlying rectangle depending on the new value of the slider.
Gauge Control
The gauge control is a pretty simple control to build. The core of this control is to exploit the css rotation property within html (Thanks to Apostolis Papaioannou for the hint). The idea is to inject a variable defined in PowerApps which we can change dynamically (e.g you can bind this to slider.value )
Build 2018: Real-World Solutions with PowerApps: Building Composite Controls
Download sample apps here
