UX Patterns:Custom Slider

In a previous post, we used the gallery control to create a more complex control, the accordion control.  In this blog, we will create a custom slider with a completely skin using the basic built-in slider that comes with PowerApps. Here is the custom slider we will be building:

To start with, we will create a group of controls composed of a built-in slider (Slider), a rectangle (SliderRail), a label (HandleText) and an image that represents the handle (Handle). The Slider element is set to transparent and is only used to extract the slide gestures which will be used to drive the formulas for SliderRail, Handle and HandleText.

Here is a summary of the different formulas and values used for various control properties. Notice how we are setting the alpha color of the built-in slider to 0 so that it’s no longer visible.

Download the sample app here