Using Slider Control In Microsoft PowerApps

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

• Quick Start on Microsoft PowerApps
• To Use Template
• To Use Blank App
• To Add Excel File
• To Use Sort And SortByColumn Functions
• To Use Filter, Search, And LookUp Functions
• To Add Contacts
• To Get User Details
• Developing Camera App
• Using Radio Button
• Developing Drawing App
• Using ListBox Control

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,
   {
           City: "London",
           Country: "United Kingdom",
           Productsales: 861500
       }, {
           City: "Berlin",
           Country: "Germany",
           Productsales: 356200
       }, {
           City: "Madrid",
           Country: "Spain",
           Productsales: 316500
       }, {
           City: "Rome",
           Country: "Italy",
           Productsales: 287400
       }, {
           City: "Paris",
           Country: "France",
           Product: 227300
       }, {
           City: "Hamburg",
           Country: "Germany",
           Productsales: 176000
       }, {
           City: "Barcelona",
           Country: "Spain",
           Productsales: 160200
       }, {
           City: "Munich",
           Country: "Germany",
           Productsales: 149400
       }, {
           City: "Milan",
           Country: "Italy",
           Productsales: 134400
       })
       // This is just a sample script. Paste your real code (javascript or HTML) here.
   
   if ('this_is' == /an_example/) {
       of_beautifier();
   } else {
       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.



Conclusion

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