Using 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.

PowerApp

Step 2
 
Create a New App in PowerApp

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

PowerApp

Step 3

Choose the Blank app.

PowerApp

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.

PowerApp

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

    PowerApp

  2. Drop the button tool on the screen.

    PowerApp

  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.  
      40.   
      41. if ('this_is' == /an_example/) {  
      42.     of_beautifier();  
      43. else {  
      44.     var a = b ? (c % d) : e[f];  

      PowerApp

Step 6

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

    PowerApp

  2. Drop the Slider tool on the screen.

    PowerApp

  3. Rename the SliderProduct.

    PowerApp

  4. Add the Options.

    Select the slider and set the max value to 500000.

    PowerApp

    Select the Slider and set the min value to 100000.

    PowerApp

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.

    PowerApp

  2. Draw the Text Horizontal control to the screen.

    PowerApp

  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.

PowerApp

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

    PowerApp

Step 8

Run the app.

PowerApp

Output 1

Main Screen will look as follows.

PowerApp

Output 2

Click on the Product Sales button.

PowerApp

Output 3

Move the Slider.

PowerApp

Output 4

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

PowerApp

Output 5

Now, move the Slider to see the changes.

PowerApp

Conclusion

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