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 Windows store, we need a Microsoft-related organization’s Office 365 ID (MSDN, Microsoft, Skype, Office 365, etc.) to log in with it.


Step 2. Create a New App in PowerApp

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

 New button

Step 3. Choose the Blank app.

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 see the Properties of the screen, which you selected. On the right side, we see the add DataSource to add the External DataSource.

 Designing the App

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.
     Button tool
  3. Add the Options
  4. Select the button and add the coding, mentioned below to the OnSelect property.
  5. Coding is as follows.
            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/) {
    } else {
        var a = b ? (c % d) : e[f];
    Product sale

Step 6. Drag and drop the Slider control.

  1. Go to the Insert menu. Moreover, it controls and drags the Slider tool.
     Slider control
  2. Drop the Slider tool on the screen.
  3. Rename the SliderProduct.
  4. Add the Options.
  5. Select the slider and set the max value to 500000.
    Add the Options
  6. 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.
    Text Gallery
  2. Draw the Text Horizontal control to the screen.
    Text Horizontal
  3. Add Coding
  4. Select the Text control and add the coding to the Items
  5. The coding is shown below.
    Filter(CityProduct, Productsales > SliderProduct).
    Add Coding

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

 Text gallery

Next, select the second item in the Text gallery and add the following coding to Text Property.

Text(ThisItem.Product sales, "##,###").

Second item

Step 8. Run the app.

Run the app

Output 1. The main screen will look as follows.

Main Screen

Output 2. Click on the Product Sales button.


Output 3. Move the Slider.

Move the Slider

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

 Slider value

Output 5. Now, move the Slider to see the changes.



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

Similar Articles