Power Apps Slider Control

In this Power Apps Tutorial, We will discuss what is a Slider control in PowerApps and its all properties. Also, by taking some simple scenarios, We will cover these below topics:

Power Apps Slider Control
How to add and use PowerApps slider
PowerApps Slider Control Examples
PowerApps slider increment or How to increment the PowerApps Slider Value
How to set the value in PowerApps slider control
PowerApps slider show value
PowerApps slider decimal
How to reset the PowerApps slider control
What is PowerApps date slider
PowerApps slider date range
PowerApps slider handle border
PowerApps image slider

Table of Contents

PowerApps slider Control

Do you know what is a Slider in PowerApps?

PowerApps Slider is a type of control where a user will specify a value by dragging a handle.
The PowerApps Slider looks like a moving indicator with a horizontal style where a user can specify the value in between the minimum and maximum value.

PowerApps slider Control Properties

Below represents some of the important key properties of the PowerApps Slider Control:

Max = It specifies the maximum value to which the user can set a slider or a rating.
Min = It specifies the minimum value to which the user can set a slider.
Default = It defines the initial value of a control before it is changed by the user.
Value = It specifies the value of an input control.
BorderColor = It specifies the color of a control’s border.
DisplayMode = It defines whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).
HandleActiveFill = It defines the color of the handle for a slider as the user changes its value.
HandleFill = It 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.
HandleSize = It defines the diameter of the handle.
Layout = It represents whether the user scrolls through a gallery or adjusts a slider top to bottom (Vertical) or left to right (Horizontal).
OnChange = This specifies the actions to perform when the user changes the value of a control (for example, by adjusting a slider).
OnSelect = It defines the actions to perform when the user taps or clicks a control.
RailFill = It 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.
ReadOnly = It defines whether a user can change the value of a slider or rating control.
Reset = This specifies whether a control reverts to its default value.
ShowValue = This defines whether a slider’s or rating’s value appears as the user changes that value or hovers over the control.
ValueFill = It 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.
ValueHoverFill = It specifies when you keep the mouse pointer on a toggle control or a slider, 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.
Visible = It defines whether a control appears or is hidden.

PowerApps add slider

Now we will see how to insert a Slider control in PowerApps.

To add a Slider control, go to the Insert tab -> click Input -> select Slider. When you will select the slider, then the control will appear on the screen as shown below.

Once you will add the slider control, you will view it on the screen as a moving bar handler. You can drag the bar to right or left as per your choice.

PowerApps Slider Control Examples

After all, here we will discuss a simple scenario that how we can use a PowerApps Slider so easily.

The below screenshot represents a Button control, a Slider control, and a Gallery control. When a user will press the button (Click Me!), then an Employee collection will create for different types of companies.
Under the button, there is a Slider control that will help you to move the handle to any specific employees’ values.
And the last one is a Gallery control that will display the values those cities that have a employee that’s greater than the value that you specify.

Refer to the below screenshot.

PowerApps Slider Control Examples — Slider Control Example in Power Apps

To achieve this requirement, follow these below steps:

Step – 1:

At first, select the Button control (Click Me!) and create a PowerApps Collection on its OnSelect property as:

OnSelect = ClearCollect(
    CompanyEmployees,
    {
        City: "Bangalore",
        Company: "Infosys",
        Employees: 3204786
    },
    {
        City: "Hyderabad",
        Company: "TCS",
        Employees: 2675604
    },
    {
        City: "Mumbai",
        Company: "Wipro",
        Employees: 3164000
    },
    {
        City: "Pune",
        Company: "Intel",
        Employees: 2665000
    },
    {
        City: "Delhi",
        Company: "Oracle",
        Employees: 2274555
    },
    {
        City: "Chennai",
        Company: "Accenture",
        Employees: 2760000
    },
    {
        City: "Gurgaon",
        Company: "Mindtree",
        Employees: 1402020
    },
    {
        City: "Kolkata",
        Company: "CGI",
        Employees: 1384000
    },
    {
        City: "Noida",
        Company: "Capgemini",
        Employees: 1345100
    }
)

Where,

CompanyEmployees = Specify a Collection name
City, Company, Employees = Headers of the collection
Bangalore, Infosys, 3204786 = These are the values for each of the collection column

Just save and preview the app. Press on the button control once. When you will press on it, you can see a collection will create named CompanyEmployees.

Step – 2:

Next, add a Slider control under the Button input. Rename the slider as MinEmployees.
Set the Max property of the Slider value is 5000000 and the Min property of the Slider value is 1000000.

Step – 3:

Now, add a Vertical Gallery control and apply the below code on its Items property as:

Items = Filter(
    CompanyEmployees,
    Employees > MinEmployees
)

Where,

CompanyEmployees = Collection name
Employees = Collection Header name
MinEmployees = Slider control name

PowerApps Slider Examples — PowerApps Slider Example

Step – 4:

Select the first section (Top level) of the gallery control and set its Text property to the below code:

Text = ThisItem.City

Next, select the bottom level text of the gallery and set its Text property to the below code as:

Text = Text(
    ThisItem.Employees,
    "##,###"
)

You can refer to the below screenshot.

Once everything is ready to use, then save and preview the app. Adjust the MinEmployees slider control to view only those cities that have employees that’s greater than the value that you specify.

PowerApps slider increment

Do you want to increment the slider value by 0.5? If so then you must think how? I can say it’s so pretty easy and simple. Here I would like to show the slider as: [ 0.5,1,1.5,2,2.5,3,3.5,4,4.5,5 …. ].

To do so, Set the Default property of the Slider control is 100.
Specify the Max and Min property of the slider control as 10 and 0 respectively.

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

Slider1.Value/2

Where,

Slider1 = Slider control name

This is how we can increment the slider control in PowerApps.

PowerApps slider set value

In this topic, We will see how we will set the value and use it later in the PowerApps Slider control.

Example – 1:

So basically in this example, I would like to connect a text input box control to a slider control.
When a user enters a number in the input box control, then the slider automatically moves its position to where that number is, and its vice versa. Also, if the user moves the slider, then the input box updates to show the number that the slider is on.
For this scenario, I have taken the Slider Min value is 0 and Max value is 10.

PowerApps slider set value — Set value in Power Apps slider

To make this thing, We will use two properties of both the controls (Text input and Slider). Such as: OnChange and Default.

Follow these below instructions to do so:

Select the Text input control and apply the below formula on its OnChange property as:

OnChange = UpdateContext({dataValue: Value(TextInput1.Text)})

Where,

dataValue = Specify the Context variable name
TextInput1 = Text input control name

2. Next, set the default value and set the below code on its Default property as:

Default = Text(dataValue)

3. Select the Slider control and set its OnChange property to the following formula:

OnChange = UpdateContext({dataValue: Slider2.Value})

Where,

dataValue = Specify a Context variable name
Slider2 = Slider Control name

4. Set the Default property of the Slider to the specified variable as:

Default = Value(dataValue)

Now Save and Preview the app. When you will enter any number (from 0 to 10) in the text box control, then the slider will automatically move to that respective number. Similarly, when you will move the slider handler to any specific number, then that respective number will display in the text box control.
If you will type 20 into the text input control with the maximum value of the slider control is set to 10, then the slider control would move dataValue down to 10 only.
Therefore, this technique would prevent users from entering values outside the range of the slider control. PowerApps would not display an error message in this instance. It would simply correct the data to an acceptable value.

Example – 2:

The below describes another scenario where I want to increase or decrease the slider value by using the PowerApps Button control.

I have a Slider that has two button icons on both sides of it, a Up Arrow button (Green highlighted one) and a Down Arrow button (Red highlighted one). When a user will select the Up button, then I would like the slider to increase by one, and when the user will select the Down button, then the value will decrease by one.
In the below screen, When I will press the up arrow icon, then the slider value will increase by 1. That means, now it is on 65, after pressing the up arrow, it will be 66 and so on.
Similarly, When I will press the down arrow icon, then the slider value will decrease by 1. That means, now it is on 65, after pressing the down arrow, it will be 64 and so on.
In case, ifwant to add the Display Mode property of the UP and Down arrow icon. That means when the value is out of range, then that specific button will disable and will not work further. Follow these below steps to achieve this.

Step – 1:

At first, set a variable to the Slider’s Default property as:

Default = varSlider

Where,

varSlider = you need to specify any variable name

Step – 2:

Then select the Up arrow icon and apply the below code on its OnSelect property as:

OnSelect = UpdateContext({varSlider: varSlider + 1})

Step – 3:

Then select the Down arrow icon and apply the below code on its OnSelect property as:

OnSelect = UpdateContext({varSlider: varSlider - 1})

Step – 4:

To make the Up arrow button disable (when the value will go out of range), set the below code on its DisplayMode property as:

DisplayMode = If(
    varSlider >= Slider3.Max,
    Disabled,
    Edit
)

Slider3 = Slider control name

Step – 5:

To make the Down arrow button disable (when it crosses 0), set the below code on its DisplayMode property as:

DisplayMode = If(
    varSlider <= Slider3.Min,
    Disabled,
    Edit
)

Refer to the below screenshot.

This is how we can work with the PowerApps slider set value.

PowerApps slider show value

Do you want the PowerApps slider value to jump to 0 or 100 based on the selected value of the slider?

To workaround with this, I will use the Reset function after setting the variable in the slider’s OnChange property.
Select the Slider control and specify a variable to its Default property as:

Default = setSliderVal

Next, apply the below code on its OnChange property as:

OnChange = If(
    Slider4.Value <= 50,
    UpdateContext({setSliderVal: 0});
    If(
        Slider4.Value >= 50,
        UpdateContext({setSliderVal: 100})
    )
);
Reset(Slider4)

Where,

Slider4 = Specify the slider control name

PowerApps slider decimal

Whenever you are working with the PowerApps Slider control, you may think that, Is it possible to work with decimals with the slider control or not?

Coming the answer to this question is, yes, you can work with the decimals in the slider control. For example, Suppose the Slider Min value is “1” and the Max value is “5“. Now I would like to increment the slider value with “.5“. Refer to the below simple scenario.

Scenario:

In PowerApps, there will be a Slider control that helps to record the body temperature of a patient in Fahrenheit. And I would like to view the temperature records as like 98.1, 98.2, 98.3, and so on.

For this requirement, I have taken the Slider Min value is 900 and the Max value is 1090.

To achieve this, At first, set the Default property of the Slider control as:

Default = 986

Where,

986 = The normal temperature of the human body is 98.6F. So when I will convert this value into decimal, then by default, it will appear as 98.6.

Next, to view the slider decimal result, insert a Label control under the slider control and apply the below code on its Text property as:

Text = Slider5/10

Where,

Slider5 = Specify the slider control name

When you will save and preview the app, the slider default value will appear with a decimal value as 98.6 as shown above. Once you will move the slider handle, then the respective value will display in decimal in the label control.

PowerApps slider reset

Do you want to reset the PowerApps Slider Control? If so, then check out the below simple scenario.

Here, I have three PowerApps input controls. Such as:

Text input Control = This is a text box where a user will enter a name.
Slider Control = This control helps to determine the age of that user. User will specify the age by dragging the handle.
Button input = When a user will click the button, then the text box and slider value will reset to its default value.

Below represents the structure where in the first image, It contains the user name and her age. When I pressed the RESET button, then both the controls reset to its default value (refer the second image).

To achieve this, first of all, select the Slider control and set its Default property to any number like:

Default = 50

you can provide any numeric value based upon your requirement.

Next, set a variable to the Slider’s Reset property as:

Reset = resetSliderVal

Select the RESET button and apply the below code on its OnSelect property as:

OnSelect = UpdateContext({resetSliderVal: true});
UpdateContext({resetSliderVal: false});

Where,

resetSliderVal = specified variable name

Reset PowerApps slider — Power Apps slider reset

Now comes to the Text input control and set its Default value to blank i.e.

Default = ""

Then, set a variable to the text input’s Reset property:

Reset = resetTextVal

Select the RESET button and apply the below formula on its OnSelect property as:

OnSelect = UpdateContext({resetTextVal: !resetTextVal});
UpdateContext({resetTextVal: !resetTextVal})

Where,

resetTextVal = specified variable name

This is how we can reset the PowerApps slider control.

PowerApps date slider

Are you interested to work with any of the PowerApps Date control? If so, then check out this below guide where you can find everything about the date control:

PowerApps date slider

PowerApps slider date range

To work around with the PowerApps Slider Date Range, you can refer to the below complete tutorial:

PowerApps slider date range

To learn more about PowerApps Date control, you can refer to the below complete tutorial:

How to use date time picker in PowerApps

PowerApps slider handle border

As we discussed above, there are some properties that you can use for only the Slider handle. Among them, there is no such property where you can use to change the outer border of the handle.
Apart from this, you can use all these below properties that you can easily use for the PowerApps Slider Handle. Such as:

HandleActiveFill
HandleFill
HandleHoverFill
HandleSize

PowerApps image slider

To make the PowerApps Image as a slider, you can go through the below links:

Also, you may like these below Powerapps Tutorials:

In this Power Apps Tutorial, We discussed how to use Slider control in PowerApps and its all properties. Also, by taking some simple scenarios, We covered these below topics:

PowerApps add slider
PowerApps Slider Control Examples
PowerApps slider increment
PowerApps slider set value
PowerApps slider show value
PowerApps slider decimal
PowerApps slider reset
PowerApps date slider
PowerApps slider date range
PowerApps slider handle border
PowerApps image slider

Bijay Kumar

I am Bijay a Microsoft MVP (10 times – My MVP Profile) in SharePoint and have more than 17 years of expertise in SharePoint Online Office 365, SharePoint subscription edition, and SharePoint 2019/2016/2013. Currently working in my own venture TSInfo Technologies a SharePoint development, consulting, and training company. I also run the popular SharePoint website EnjoySharePoint.com