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.

PowerApp

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.

Go to the Insert menu, control, and drag the button tool.
Drop the button tool on the screen.
Add the Options
Select the button and add the coding, mentioned below to the OnSelect property.

Coding is as follows.

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.

Go to the Insert menu. Moreover, it controls and drags the Slider tool.
Drop the Slider tool on the screen.
Rename the SliderProduct.
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.

Go to the Insert Menu, choose Gallery and drag the Text gallery -> Horizontal.
Draw the Text Horizontal control to the screen.
Add Coding
Select the Text control and add the coding to the Items

The coding is shown below.

Filter(CityProduct, Productsales > SliderProduct).

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.

Product

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.

Microsoft

Conclusion

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