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:
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:
|This property is assigned to a screen reader label.
|A user can specify the color for a border.
|This property specifies the type of border that the control should have [“Solid,” “Dashed,” “Dotted,” “None”].
|When the user opens the app, we can specify the value.
|When the DisplayMode property of the control is set to Disabled, it indicates a color for the control’s border.
|Determines whether it enables user input (Edit), only displays data (View), or is disabled (Disabled).
|The color changes in the slider handle as the user adjusts its value.
|The color of the handle, which is the component that shifts location, in a slider control.
|The diameter of the handle.
|The 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.
|The maximum value that a user can set on a slider.
|The minimum value that a user can set on a slider.
|When the user changes a value, it specifies what action to perform.
|When the user clicks on a control, it specifies what action to perform.
|The color of a control’s border that appears when a user taps or clicks on said control.
|The 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.
|Resetting the controls to their default value can be beneficial.
|Consider displaying the value of a slider or rating control during a user’s interaction or when they hover over it.
|The 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.
|Here, 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].
- By default, the slider control name will be “Slider1“; you can Rename it using “sld” based on your requirement.
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.
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.
Let me show you how to achieve this:
- On the Power Apps screen, insert a Slider Control -> Set its Default value to:
- Now, I will rename the Slider control to “Sld_UserSelection” as shown below:
- Select the Slider control -> Set its Max value to:
- Insert a Text label -> Set its Text property to:
- Sld_UserSelection = Slider control name.
- Once the app is ready, Save, Publish, and Preview the app. The label will display the user-set value whenever the user adjusts a value by dragging the slider control.
I have a SharePoint Online list [User Subscription Details] that has various columns like:
|Single line of text
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:
Follow the below steps to achieve this:
- On the Power Apps screen, insert a Slider control -> Set its Max property to:
- Insert a Gallery control -> Set its Items property to:
'User Subscription Details',
'Monthly Revenue' > Sld_MonthlyRevenue.Value
- User Subscription Details = SharePoint list name
- Monthly Revenue = SharePoint list number column name
- Sld_MonthlyRevenue = Slider control name
- Once the app is ready, Save, Publish, 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].
This is how we can work with a Power Apps slider control.
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:
- Power Apps Modern Button Control
- Power Apps Radio Button Control
- Power Apps Modern Date Picker Control [How to Use]
- Filter Power Apps Collection By Yes No Column
- Filter Power Apps Collection By Logical Operators
Preeti Sahu is an expert in Power Apps and has more than 6 years of experience working with SharePoint and the Power Platform. As a Power Platform expert for Power BI, Power Apps, Power Automate, Power Virtual Agents, and Power Pages, she is currently employed with TSinfo Technologies. She is the author of the book Microsoft Power Platform A Deep Dive. She also made a big technical contribution to SharePointDotNet.com in the form of articles on the Power Platform. She enjoys traveling and spending time with her family in her spare time.