How to Use Slider in Power Apps?

In this Power Apps tutorial, we will discuss the Slider control in PowerApps, its properties, and how to add a Slider control in PowerApps.

As far as we know, Power Apps has various controls to work with canvas apps; apart from that, PowerApps Slider is a user interface element used to select a value within a defined range by dragging a slider.

Also, we will see working with PowerApps slider increment and PowerApps slider in the gallery. Moreover, I will let you know some more stuff like:

  • Power Apps Date Slider
  • Power Apps Slider Percentage
  • Power Apps Double Sliders
  • powerapps Set Slider Value

Slider Control in Power Apps

Power Apps Slider is a type of control where a user specifies a value by dragging a handle. It’s like a moving indicator with a horizontal style, where a user can specify a value between the minimum and maximum values.

In Power Apps, the Slider control is often used in different scenarios. It is used when you need to input numerical values within a specified range, such as when setting a price range, selecting a quantity, or choosing a percentage.

powerapps slider control

Power Apps Slider Control Properties

Next, we will see what are the Power Apps slider control properties. Such as:

PropertyDescription
DefaultIt defines the initial value of a control before the user changes it
MaxIt specifies the maximum value to which the user can set a slider or a rating
MinIt specifies the minimum value to which the user can set a slider
ValueIt specifies the value of an input control
HandleActiveFillIt defines the color of the handle for a slider as the user changes its value
HandleFillIt defines the color of the handle (the element that changes position) in a toggle or slider control
HandleHoverFill It provides the color of the handle in a slider when the user keeps the mouse pointer on it
HandleSizeIt defines the diameter of the handle
LayoutIt represents whether the user scrolls through a gallery or adjusts a slider top to bottom (Vertical) or left to right (Horizontal)
RailFillIt represents the background color of the rectangle in a toggle control when its value is false or the color of the line to the right of the handle in a slider control
RailHoverFill It specifies when you hover on a toggle control or a slider, the background color of the rectangle in a toggle control when its value is false, or the color of the line to the right of the handle in a slider control
ReadOnlyIt defines whether a user can change the value of a slider or rating control
ShowValueThis defines whether a slider’s or rating’s value appears as the user changes that value or hovers over the control
ValueFillIt provides the background color of the rectangle in a toggle control when its value is true or the color of the line to the left of the handle in a slider control
ValueHoverFillIt provides the background color of the rectangle in a toggle control when its value is true or the color of the line to the left of the handle in a slider control

How to Use Slider in Power Apps

Here, I will show you how to add a slider control in Power Apps. To do so, follow the below steps. Such as:

See also  How to Use Power Apps Gallery OnSelect?

1. On the Power Apps Screen, add a Slider control [Expand + Insert tab > Inputs > Slider], as shown below.

slider in powerapps

2. Once the slider is added by default, the Default sider value is 50 [Max value is 100], and you can also change the Layout [Horizontal or Vertical]

slider control in powerapps

Power Apps Slider Increment

Let’s see how to work with the Power Apps slider increment with a simple example.

Example:

Suppose you want to increment the slider value by 0.5, and I would like to show the slider as [0.5, 1,1.5, 2,2.5, 3,3.5, 4,4.5, 5]. Have a look at the output below.

Output:

powerapps slider increment

To achieve it, follow the below steps. Such as:

1. On the Power Apps Screen, insert a Slider control and set its Default, Max, and Min properties, as shown below.

Default = 100

Max = 10

Min = 0
powerapps slider increment

2. Next, insert a Text label control for the slider caption purposes and apply the below code on its Text property:

Text = sld_Increment.Value/2

Where,

  • sld_Increment = Power Apps slider control name
power apps slider increment

3. Once your app is ready, Save, Publish, and Preview the app. Once the user drags the slider, the text label displays the result [increment the slider value by 0.5], as shown below.

This is how we can increment the slider control in Power Apps.

increment slider in power apps

Power Apps Slider in Gallery

In this section, I will explain how to work with the Power Apps slider in the gallery with a simple scenario.

Scenario:

I have created a Power Apps collection [colProducts] from my SharePoint Online list named “Product details” which contained the below fields.

Column NameData Type
Product NameIt is a default single line of text
ManufacturerChoice
PriceCurrency
QuantityNumber
Purchase DateDate and time
power apps slider in gallery

Now, I would like to filter and display the Power Apps collection records on the Gallery control based on the selected slider price range, as shown below.

See also  Power Apps Select All Checkbox in Gallery

Output:

power apps slider in gallery

To work around this, follow the below-mentioned steps. Such as:

1. To create a Power Apps collection, select the App object [From the left navigation] and set its OnStart property to the code below.

OnStart = ClearCollect(
    colProducts,
    'Product Details'
)

Where,

  • colProducts = Power Apps collection name
  • ‘Product Details’ = SharePoint Online list
how to use power apps slider in gallery

2. On the Power Apps Screen, insert a Slider control and set its Max and Min properties, as shown below.

Max = 1800

Min = 1000
powerapps slider in gallery

3. Now, insert a Gallery control and set its Items property as:

Items = Filter(
    colProducts,
    Price > sld_Price.Value
)

Where,

  • colProducts = Power Apps collection name
  • Price = Collection currency field
  • sld_Price = Power Apps slider control name
slider in canvas app

4. Finally, Preview the app. Once the user selects the price range value from the slider control, the gallery filters and displays collection records based on the slider range value, as shown below.

how to use powerapps slider in gallery

This way, you can use the Power Apps slider in gallery control.

Power Apps Date Slider

Suppose you want to use a slider control to select dates between January 1, 2024, and December 31, 2024, and display the selected date on a text label. To do so, follow the below steps.

1. On the Power Apps Screen -> Insert a Slider control and set its Min and Max properties.

Max = 365     -> Numerical value representing December 31, 2024

Min = 0           -> Numerical value representing January 1, 2024
Power Apps Date Slider

2. Next, add the Text label control and set its Text property as:

Text = Text(
    DateAdd(
        Date(
            2024,
            1,
            1
        ),
        sld_Date.Value,
        TimeUnit.Days
    ),
    "[$-en-US]mm/dd/yyyy"
)

Where,

  • sld_Date = Power Apps slider control name
  • “[$-en-US]mm/dd/yyyy” = Date format
PowerApps Date Slider

3. Finally, Preview the app. When the user selects any date value from the slider, the text label displays the result in a date format, as shown below.

See also  PowerApps Search User

Output:

Power Apps Date Slider

Power Apps Slider Percentage

To create a Power Apps slider that represents a percentage value, you can follow these steps:

1. On the Power Apps Screen -> Insert a Slider control and set its Min and Max properties.

Max = 100   -> Representing 100%

Min = 0         -> Representing 0%
Power Apps Slider Percentage

2. Next, add the Text label control and set its Text property as:

Text = "Selected Percentage: "&sld_Percentage.Value&"%"

Where,

  • sld_Percentage = Power Apps slider control name
PowerApps Slider Percentage

3. Once it is done, Preview the app. Whenver the user selects the percentage value from the slider control, the text label displays the selected slider percentage value, as shown below.

Power Apps Slider Percentage

Power Apps Double Sliders

Let’s see how to use two sliders or double sliders in the Power Apps with a simple example.

Example:

In this example, I have added two sliders for selecting time [Hour and Minutes], including the Date picker [To select date] and the Dropdown control [For selecting AM/PM]. Also, I have added a Text label to display the selected date and time.

Output:

Power Apps Double Slider

To do so, follow the below steps.

1. On the Power Apps Screen -> Insert a Date picker control -> Add a Slider control [sld_Hour] and set its Max and Min properties.

Max = 24   
                                            //For Hours
Min = 0 
Power Apps Double Sliders

2. In the same way, insert another Slider control and set its Max and Min properties.

Max = 59
                                         //For Minutes
Min = 0
PowerApps Double Sliders

3. Next, insert a Dropdown control for AM/PM values, add a Text label, and set its Text property as:

Text = "Selected Date and Time: "&dte_SelectDate.SelectedDate&"   "&sld_Hour.Value&":"&sld_Minutes.Value&"  "&drp_Value.Selected.Value

Where,

  • dte_SelectDate = Power Apps dropdown control
  • sld_Hour, sld_Minutes = Slider control names
  • drp_Value = Dropdown control name
How to use Power Apps double sliders

4. Finally, Preview the app. When the user selects the date and time, including the slider control’s values, the text label will display the result [Selecting date and time], as shown below.

How to use PowerApps double sliders

This way, we can work with the Power Apps double slider controls.

Power Apps Set Slider Value

Suppose you want to set the specific value to the slider control to display the button control; follow the below steps.

1. On the Power Apps Screen, insert a Button control under the Slider control and set its Visible property to the code below.

Visible = sld_SetValue.Value = 75    //You can set another value

Where,

  • sld_SetValue.Value = 75 = Specific slider value
How to Set Power Apps Set Slider Value

2. Now, Preview the app. Whenever the user selects a specific value [75], the button control will be visible to click. Otherwise, it will be in disable mode. Have a look at the below output.

powerapps set slider value

This way, you can set the value to the Power Apps slider control.

Some more Power Apps articles you may also like:

I hope this Power Apps tutorial is helpful. This article explained everything about slider in Power Apps, PowerApps slider properties, how to use a slider in PowerApps, powerapps slider increment, set slider value Power Apps, etc.

Whenever you need to work with the Power Apps slider control, you can follow this tutorial until the end to get detailed information with simple, real-time examples.

>