Answered

How can I connect text input box to slider control?

Like (0) Share

Report

Posted on 20 Jan 2018 15:31:12 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.

All responses (14)

Answers (1)

timl 35,087 Super User 2025 Season 1 on 24 Jul 2023 at 20:21:05

Like (1)

Report

Re: How can I connect text input box to slider control?

@LPLPowerAppUser

Since the text input and slider control values derive their values from the dataValue variable, adapting this to work on a Form is a case of initialising the dataValue to the target value.

Your app presumably contains some control to load the record that's shown on the form - eg, a button or the OnSelect of a gallery. You would initialise the variable in the same place.
LPLPowerAppUser 34 on 24 Jul 2023 at 19:21:36

Like (0)

Report

Re: How can I connect text input box to slider control?

@timl @markvogt
Have you guys ever figured this out? I am experiencing the same problem when trying to receive the Parent Default when editing a form
markvogt 6 on 08 Apr 2020 at 13:05:01

Like (2)

Report

Re: How can I connect text input box to slider control?

THIS solution has a serious FLAW: it CAN'T remember any PREVIOUS state of the control 😮

REASON:
NONE of your formulae (for the Default or OnChange values of either control) make ANY reference to Parent.Default :-?

SO...
This solution might work here & now on a form... but once you SAVE that data and then later try to RETRIEVE IT...
... NONE of the PREVIOUS values would be retrieved 😮

WORKING on a solution which checks for any Parent.Default values, and will post shortly (I hope)...

-Mark in North Aurora
RussW 42 on 29 Jun 2018 at 04:43:26

Like (0)

Report
Re: How can I connect text input box to slider control?

Hi jchicky,

It's possible by setting up a few things:

create a label (example: lblSlider1Value) with the exact size of your text input box (example: txtSlider1Value)
adjust the border size so that both match in size and color
place the label over your text input box
Slider1.OnSelect set to UpdateContext ({lblVisible: true, txtBoxVisible: false}) < this will give you the desired result of the number changing while the slider is being adjusted
lblSlider1Value.OnSelect set to UpdateContext ([lblVisible: !lblVisible, txtBoxVisible: !txtBoxVisible}) < this lets you manually enter a number in the text input box when you click in the area of the text input/label
lblSlider1Value.Visible set to lblVisible
txtSlider1Value.Visible set to txtBoxVisible
Set Slider1.ShowValue to False
The only slight drawback to this approach is when you go to click in the text box to input your number, you are forced to click twice as the visible property goes through the change over and the text input box takes the second click. I couldn't see any other property in the slider control (like a trigger when the mouse button or finger tap is released from the screen... like an OnRelease event or something, so this is the best cleanest alternative I can come up with)...

Hmmm... maybe we can request that be added to the properties of the slider control: OnPress and OnRelease behaviors to trigger something else. Then we can update the context of the visible properties and have the best of all worlds. You could then be clicking or tapping in the text box on the first click or tap.

Hope that makes sense and helps out.
Russ
jchicky 28 on 22 Jan 2018 at 18:45:54

Like (0)

Report

Re: How can I connect text input box to slider control?

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.
Sienna 1,532 on 20 Jan 2018 at 17:45:44

Like (0)

Report

Re: How can I connect text input box to slider control?

@timl
Yes you did the right thing. I didn't notice that. Thanks for pointing that out 😉
timl 35,087 Super User 2025 Season 1 on 20 Jan 2018 at 17:21:26

Like (1)

Report

Re: How can I connect text input box to slider control?

@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.
Sienna 1,532 on 20 Jan 2018 at 17:03:17

Like (0)

Report

Re: How can I connect text input box to slider control?

@timl
My appology.. It works that way. Just tryied that
Sienna 1,532 on 20 Jan 2018 at 16:46:19

Like (0)

Report

Re: How can I connect text input box to slider control?

@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
Sienna 1,532 on 20 Jan 2018 at 16:28:39

Like (0)

Report

Re: How can I connect text input box to slider control?

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