Power Apps Slider Control [How to Use]

Did you have any requirements to work with a Power Apps Slider Control?

If Yes, follow this complete tutorial to learn about Power Apps Slider Control, like what it is, the key properties of a Power Apps Slider control, and how to add a slider control in Power Apps.

Moreover, we will learn how to use a Slider control in Power Apps with various real-life scenarios.

Power Apps Slider Control

A Power Apps Slider Control is a graphical user interface control that allows users to adjust a value by dragging a handle.

Also, the user can select a value between the minimum and maximum values, as defined by the user interface.

Refer to the image below for how a slider control in Power Apps looks like:

Power Apps Slider Control

This is the overview of Power Apps Sldier control.

Power Apps Slider Control Properties

Here, I will explain the properties of Power Apps slider control:

Property NameDescription
AccessibleLabelThis property is assigned to a screen reader label.
Border ColorA user can specify the color for a border.
Border StyleThis property specifies the type of border that the control should have [“Solid,” “Dashed,” “Dotted,” “None”].
DefaultWhen the user opens the app, we can specify the value.
DisabledBorderColorWhen the DisplayMode property of the control is set to Disabled, it indicates a color for the control’s border.
DisplayModeDetermines whether it enables user input (Edit), only displays data (View), or is disabled (Disabled).
HandleActiveFillThe color changes in the slider handle as the user adjusts its value.
HandleFillThe color of the handle, which is the component that shifts location, in a slider control.
HandleSizeThe diameter of the handle.
LayoutThe area in question is the rectangle’s background color in a slider control when its value is false or the line to the right of the handle in a slider control.
MaxThe maximum value that a user can set on a slider.
MinThe minimum value that a user can set on a slider.
OnChangeWhen the user changes a value, it specifies what action to perform.
OnSelectWhen the user clicks on a control, it specifies what action to perform.
PressedBorderColorThe color of a control’s border that appears when a user taps or clicks on said control.
RailFillThe area in question is the rectangle’s background color in a rating control when its value is false or the line to the right of the handle in a slider control.
ResetResetting the controls to their default value can be beneficial.
ShowValueConsider displaying the value of a slider or rating control during a user’s interaction or when they hover over it.
ValueFillThe appearance of various controls. Specifically, the toggle control’s background color when its value is set to true and the color of the line positioned to the left of the handle in a slider control.
VisibleHere, we can specify whether the rating control can be visible.

These are the properties of a Power Apps slider control.

How to Add a Power Apps Slider Control

Here, I will show you how to insert a slider control in Power Apps:

  • Sign into your Power Apps with your valid Microsoft 365 Credentials.
  • Create a Blank canvas app -> On the Power Apps screen, insert a Slider control.[Click on +Insert -> Expand Input -> Select Slider].
Power Apps Slider Control
  • By default, the slider control name will be “Slider1“; you can Rename it using “sld” based on your requirement.
Slider control in Power Apps

This is how we can insert a Power Apps slider control.

How to Use Power Apps Slider Control

This section will show you how to work with a Power Apps slider control with the below examples.

Example 1:

I have created a Power Canvas app and then added a Slider control. I have set the maximum value as 50; whenever the user adjusts a value by dragging a handle, the Text label will display the user-set value.

How to use slider control in Power Apps

Let me show you how to achieve this:

  • On the Power Apps screen, insert a Slider Control -> Set its Default value to:
"25"
How to add Power Apps slider control
  • Now, I will rename the Slider control to “Sld_UserSelection” as shown below:
Add Power Apps slider control
  • Select the Slider control -> Set its Max value to:
50
How to use Power Apps slider control
  • Insert a Text label -> Set its Text property to:
Sld_UserSelection.Value

Where,

  1. Sld_UserSelection = Slider control name.
How to work with a slider control in Power Apps
  • Once the app is ready, SavePublish, and Preview the app. The label will display the user-set value whenever the user adjusts a value by dragging the slider control.
How to add slider control in Power Apps

Example 2:

I have a SharePoint Online list [User Subscription Details] that has various columns like:

Column NameData Type
User IDTitle
Country Single line of text
Monthly RevenueNumber
How to work with Power Apps slider control

On my Power Apps screen, I have added a Slider control and a Gallery control. Whenever the user adjusts a value by dragging a handle of the slider control, the gallery will filter and display the records based upon the Monthly Revenue column [SharePoint number column] as shown below:

Using Slider control in Power Apps

Follow the below steps to achieve this:

  • On the Power Apps screen, insert a Slider control -> Set its Max property to:
15
Using Power Apps Slider Control
  • Insert a Gallery control -> Set its Items property to:
Filter(
    'User Subscription Details',
    'Monthly Revenue' > Sld_MonthlyRevenue.Value
)

Where,

  1. User Subscription Details = SharePoint list name
  2. Monthly Revenue = SharePoint list number column name
  3. Sld_MonthlyRevenue = Slider control name
Using Slider increment value in Power Apps
  • Once the app is ready, SavePublish, and Preview the app. When the user adjusts a value by dragging a slider control, the gallery filters and displays the records based on the above SharePoint list number column [Monthly Revenue].
Power Apps Slider

This is how we can work with a Power Apps slider control.

Conclusion

This Power Apps tutorial taught us about Power Apps Slider Control, like what it is, the key properties of a Power Apps Slider control, and how to add a slider control in Power Apps.

Moreover, we discussed using a Slider control in Power Apps with some real-life scenarios.

Also, you may like some more Power Apps tutorials: