Using Slider Control In Microsoft PowerApps

In this article you will learn how to Add the Slider Control in Microsoft PowerApps.

Before reading this article, please go through some important articles, mentioned below.

In PowerApps, we can add the Slider Control.

Slider Control

A control with which the user can specify a value by dragging a handle. It's a graphical control element with which a user may set a value by moving an indicator, usually in a horizontal fashion.

The user can indicate a value between a minimum and a maximum value, which is specified by you by dragging the handle of a slider left-right or up-down, depending on the direction, which you choose.

Follow the steps, mentioned below to work with Slider Control in PowerApps.

Step 1
Log into the PowerApps

After downloading PowerApps from the Window store, we need a Microsoft related organization’s Office 365 ID or (MSDN, Microsoft, Skype, Office 365 etc.) to login with it.


Step 2
Create a New App in PowerApp

After login, we can see the dashboard. Subsequently, we click on the New button.


Step 3

Choose the Blank app.


Step 4
Designing the App

Now, let's start designing the app. On the left side, we can see the Individual Screens to add our data. On  the right side, we see the list of layouts. On the top, we see the formula bar.

Subsequently, you seen the Properties of the screen, which you selected. On the right side, we see the add DataSource to add the External DataSource.


Step 5
Drag and Drop the button control 
  1. Go to the Insert menu, control and drag the button tool.


  2. Drop the button tool on the screen.


  3. Add the Options

    Select the button and add the coding, mentioned below to the OnSelect property.

    Coding is as follows.
      1. ClearCollect(CityProduct,  
      2. {  
      3.         City: "London",  
      4.         Country: "United Kingdom",  
      5.         Productsales: 861500  
      6.     }, {  
      7.         City: "Berlin",  
      8.         Country: "Germany",  
      9.         Productsales: 356200  
      10.     }, {  
      11.         City: "Madrid",  
      12.         Country: "Spain",  
      13.         Productsales: 316500  
      14.     }, {  
      15.         City: "Rome",  
      16.         Country: "Italy",  
      17.         Productsales: 287400  
      18.     }, {  
      19.         City: "Paris",  
      20.         Country: "France",  
      21.         Product: 227300  
      22.     }, {  
      23.         City: "Hamburg",  
      24.         Country: "Germany",  
      25.         Productsales: 176000  
      26.     }, {  
      27.         City: "Barcelona",  
      28.         Country: "Spain",  
      29.         Productsales: 160200  
      30.     }, {  
      31.         City: "Munich",  
      32.         Country: "Germany",  
      33.         Productsales: 149400  
      34.     }, {  
      35.         City: "Milan",  
      36.         Country: "Italy",  
      37.         Productsales: 134400  
      38.     })  
      39.     // This is just a sample script. Paste your real code (javascript or HTML) here.  
      41. if ('this_is' == /an_example/) {  
      42.     of_beautifier();  
      43. else {  
      44.     var a = b ? (c % d) : e[f];  


Step 6

Drag and drop the Slider control
  1. Go to the Insert menu. Moreover, it controls and drags the Slider tool.


  2. Drop the Slider tool on the screen.


  3. Rename the SliderProduct.


  4. Add the Options.

    Select the slider and set the max value to 500000.


    Select the Slider and set the min value to 100000.


Step 7

Drag and drop the Text Gallery tool

If you move it, the changes appear on the Text Gallery control.
  1. Go to the Insert Menu, choose Gallery and drag the Text gallery -> Horizontal.


  2. Draw the Text Horizontal control to the screen.


  3. Add Coding

    Select the Text control and add the coding to the Items

    Coding is shown below.
    1. Filter (CityProduct, Productsales > SliderProduct).

Now, select the first item in the Text gallery and add the ThisItem.City to Text Property.


Next, select the second item in the Text gallery and add the following coding to Text Property.
  1. Text (ThisItem.Productsales, "##,###"). 


Step 8

Run the app.


Output 1

Main Screen will look as follows.


Output 2

Click on the Product Sales button.


Output 3

Move the Slider.


Output 4

Move the Slider, which depends on the Slider value and the text gallery is changed.


Output 5

Now, move the Slider to see the changes.



I hope, you understood how to Add the Slider Control in Microsoft PowerApps and how to run it.