Unanswered

How can I connect text input box to slider control?

(0) Share

Report

Posted on by jchicky

I have a text input box that allows a user to enter a number. I would like to add a slider control next to it so they have the option to use a slider control. The slider would allow for quick changes, whereas the input box would allow for more precise inputs (especially in cases where there is a slider with a huge min-max range).

What is the best way to connect both of these? So if a user enters a number in the input box, the slider automatically moves its position to where that number is, and vice versa. If the user moves the slider, the input box updates to show the number that the slider is on.

Categories:

Building Power Apps

I have the same question (0)

All responses (14)

Answers (1)

Sienna 1,532 on at

Like (1)

Report

One of the option according to your example is set "default" property of the text box to
Slider1.Value

Obviously change the slider name to your slider name

Was this reply helpful? Yes No
jchicky 28 on at

Like (0)

Report

Thanks, Sienna. Would this also be a good way to restrict the values that are acceptable in the input box? For example, if I have the slider set to a min-max of 0-100 and I connect it to the input box as you described setting the default property of the text box to Slider1.Value. If a user enters 200 in the input box, do they get an error (since the slider maxes out at 100)?

Was this reply helpful? Yes No
Sienna 1,532 on at

Like (0)

Report

That depends what kind of error warning you would like to get and when..Do you want for example change the textbox border colour to red? Or do you want to pop up a message? Or do you want to change it automatically to max value of slider?

Was this reply helpful? Yes No
Verified answer

timl 36,383 Super User 2025 Season 2 on at

Like (4)

Report
@jchicky wrote:
So if a user enters a number in the input box, the slider automatically moves its position to where that number is, and vice versa. If the user moves the slider, the input box updates to show the number that the slider is on.

To do this in a bi-directional way, I'd recommend that you set the default values of the slider and input box controls to a variable. I'd then update the variable on the OnChange property of both controls. The steps would be:

1 Set the OnChange property of the text input control to the formula here. dataValue is the name of the variable that we use.

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

2. Set the default property of the text input control to:

Text(dataValue)
3.Set the OnChange property of your slider control to the formula here.

UpdateContext({dataValue: Slider1.Value})

4. Set the default property of your slider control to:

Value(dataValue)

If you were to type 200 into the text input control with the maximum value of the slider control is set the 100, the slider control would 'coerce' dataValue down to 100. 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.

Was this reply helpful? Yes No
Sienna 1,532 on at

Like (0)

Report

To make an error message in this example change the texbox border colour to red is to set rules
See image

Was this reply helpful? Yes No
Sienna 1,532 on at

Like (0)

Report

@timl
Not a good way of doing it.. The error is fixed only once. If you enter wrong value second time it won't fix it. It might be a bug therefore I rather prefer to secure it with a code if I want to do it that way

Was this reply helpful? Yes No
Sienna 1,532 on at

Like (0)

Report

@timl
My appology.. It works that way. Just tryied that

Was this reply helpful? Yes No
timl 36,383 Super User 2025 Season 2 on at

Like (1)

Report

@Sienna

No worries. I like your idea of using a rule to highlight the control by the way.

Just to clarify for anyone reading this, the slider control will coerce the value down on second, and subsequent occasions.

The main purpose of my post was just to address the requirement to update the input box based on the slider value:
If the user moves the slider, the input box updates to show the number that the slider is on.

Was this reply helpful? Yes No
Sienna 1,532 on at

Like (0)

Report

@timl
Yes you did the right thing. I didn't notice that. Thanks for pointing that out 😉

Was this reply helpful? Yes No
jchicky 28 on at

Like (0)

Report

This solution worked best for me, thanks! Do you know of a way to enhance this even further by having the input box mimic the slider as it’s being moved around? Right now, the input box updates after the user let’s go of the slider. Essentially, I’m trying to see if there’s a way to have the input box serve as the slider’s “show value” feature. If I can do that then I can turn off the “show value” switch.

Was this reply helpful? Yes No