Power Apps Modern Slider Control – How to Use

Power Apps provides various modern controls with different functionalities. Among them, Modern Slider is an important and useful control that allows the user to drag a handle to specify a value.

In this article, I will tell you about Power Apps Modern Slider Control and its key properties. Also, we will see how to use a modern slider in Power Apps with various examples like:

  • Get Power Apps modern slider value
  • Filter Power Apps Gallery using a modern slider

Additionally, we will learn how to enable the Power Apps Modern Controls in the Canvas app.

Power Apps Modern Slider Control

By dragging the handle of a slider in either the left or right direction, the user can indicate a value between a minimum and a maximum value that you choose.

Refer to the image below that how a Modern slider looks like:

Power Apps Modern Slider Control

This is the overview of a Modern Slider control in Power Apps.

Power Apps Modern Slider Properties

The table below represents some of the key properties of a Power Apps modern Slider control:

PropertyDescription
OnChangeSpecifies the actions to perform when the user changes the value of a control.
ValueIt defines the default and current value of slider control.
MinIt specifies the minimum value to which the user can set a slider.
MaxIt specifies the maximum value to which the user can set a slider or a rating.
VisibleSpecifies whether to display or hide the Modern Slider control.
Display modeIt defines whether the control allows user input (Edit), Displays data (View), or is disabled (Disabled).
LayoutIt defines whether the user scrolls through a gallery or adjusts a slider from top to bottom (Vertical) or left to right (Horizontal).
Vertical:
Power Apps Modern Slider Layout
Horizontal:
PowerApps Modern Slider Layout
SizeWidth – The distance between the control’s left and right sides.
Height – Distance between the control’s top and bottom.
Position– Distance between the control’s left side and the screen’s left edge.
Y – Distance between the top of the control and the top edge of the screen.

These are the properties of a Modern Slider in Power Apps.

See also  Power Apps Loading Spinner

Add Power Apps Modern Slider Control

Here, we’ll see how to add a Modern Slider Control in the Power Apps Canvas app.

Initially, on the Power Apps Canvas app Settings page, you need to enable the “Modern controls and themes” option.

  1. Sign in to Power Apps with your valid Microsoft credentials.
  2. Create a New Blank Canvas app (Apps -> + New App -> Canvas).
  3. Provide a unique name for the app (Power Apps Modern Slider), choose the Format as Tablet, and Click on Create.
  4. On the Power Apps Screen, Click on ellipses () from the top -> Settings.
Add Power Apps Modern Slider

5. From the Settings pane, Go to General -> Scroll down and Enable the Modern controls and themes as shown below. Click on Close.

Power Apps Modern Slider

6. Expand the + Insert tab (from the top) -> Modern -> Select Slider under Input section.

Add modern slider in Power Apps

The Modern Slider will appear on the screen with the default name Slider1. Later, you can change the name as needed.

This is how to add Modern Slider control in the Power Apps Canvas app.

How to Use Power Apps Modern Slider Control

Now, we will discuss how to use a modern slider in Power Apps with examples below:

Get a Modern Slider Value in Power Apps

Usually, the Power Apps modern slicer does not show any value or number. A user can only drag the slicer handle to the left and right. In this case, the user could also want to see the specific value at any given moment when moving or stopping the handle.

See also  How to Filter List Box in Power Apps?

Follow the example below to do so.

Let’s say there is a Modern slicer and a Text label control. When a user drags the slider handle, the slicer value displays in the label, as shown below.

How to Use Power Apps Modern Slider Control
  • To achieve this, select the modern slicer and set its Min and Max properties as:
Min = 0
Max = 500

You can set any number in the Min and Max property.

How to Use Power Apps Modern Slider
  • Add a Text label and set its Text property as:
Text = Slider1.Value

Where,

Slider1 = Modern Slider Name

How to Use Modern Slider in Power Apps
  • Preview the app and drag the handle from left to right or vice versa. The label value will also change automatically according to your move.

This way, we can get the modern slicer value in Power Apps.

How to Filter Power Apps Gallery By Modern Slider

Next, we will see how to filter a gallery control using the Modern Power Apps Slider.

In Power Apps, there is a Modern Slicer and a Gallery control. When a user sets the slicer to a specific number [suppose 7 Seater], the gallery will filter and display all the records according to the modern slicer value.

Refer to the image below.

Filter Power Apps Gallery By Modern Slider

To work around this, follow the instructions below:

1. I have a SharePoint list named Car Rental Services with four various columns:

ColumnData type
Car NameSingle line of text
Car TypeChoice [Automatic Transmission, Manual Transmission, Continuously Variable Transmission, Semi-automatic Transmission]
SeatsNumber
Car ImageImage
How to Filter Power Apps Gallery By Modern Slider

2. In Power Apps, add a Modern slider and set its Min and Max properties as:

Min = 0
Max = 10
Power Apps Filter Gallery By Modern Slider

3. Inside a Text label and set its Text property as:

Text = sldSeater.Value & " Seater"

Where,

See also  Power Apps Select All Checkbox in Gallery

sldSeater = Modern Slider Name

Power Apps Filter Gallery By Slider

4. Next, insert a Gallery control and apply the code below on its Items property as:

Items = Filter(
    'Car Rental Services',
    Seats = sldSeater.Value
)

Where,

  • Seats = SharePoint Number Field
  • sldSeater = Modern Slider Control Name
Power Apps Modern Slider Examples

5. Save, Publish, and Preview the app. Set the modern slicer to whatever type of seater you want. According to the slider selection, the gallery will filter and display all the records.

This way, we can filter the gallery by modern slider in Power Apps.

Conclusion

I hope this article helped you to understand all about the Modern Slider control, its properties, and how to use it with various examples like:

  • How to get modern slider value in Power Apps
  • Filter Gallery by a Power Apps modern slider

Some more Power Apps modern controls also you may like:

>