Binding text input to incremental slider

I used an incremental slider widget I found on this forum. It works great! Now I’d like to add another input. So, if someone types a number into a text field I would like this to also move the slider.

You should be able to add a text field with an “OnTextChange” event to update the slider when a person enters data.

If you need more assistance, please link to the slider widget you are using or include your RP file.

I just did this!

Let me speak from experience and say that if you you want the control to be reciprocal (moving the slider also changes the text in the box) use OnKeyUp instead of OnTextChange.

1 Like

SliderWithInput.rp (92.1 KB)
I used the notched slider file to create this slider with input version. I added a flat image behind it to match our design, but one of the issues I’m running into is the original widget uses text not a text input field. I’m not sure how to change this.

notched slider.rp (191.2 KB)
Here is the original notched slider file.

Did you take a label and convert it to a text field? For whatever reason, I’m not able to enter text into the field, but no matter, here’s what you do.

For the text field where you want the amount to be entered, add an OnKeyUp case.

Assuming:

  • LoanAmt = the amount in your text field
  • MinVal is the minimum amount on the slider
  • MaxVal is the maximum on the slider
  • Range is the slider panel,

Add a Move command to move the slider handle.

For the X value, this would be your formula: [[((LoanAmt / MaxVal) * Range.width) + Range.x]] for the Y value, just use the Y Value of the slider handle.

Does that make sense?

If you really wanted to get fancy, you could add additional case with a condition that if the entered amount does not meet the minimum or exceeds the maximum, nothing would move and an error message would display

This is one of the issues. It is just text, not a text field. I added an image in the background so it looks like a text field. I tried to convert the text to a text input field but couldn’t do it. Is there a way to do this?

No, and there’s no style feature that allows you to hide the border of an actual text field, BUT you can add an actual text field and convert it to a dynamic panel, then make the panel a pixel or two smaller than the actual text field, which will effectively hide the border.

It also wouldn’t be that hard to recreate the background in Axure :slight_smile:

I added a new Text Input field
set the value to the same as the text value

On Text Change, I first checked to see if it was within the min and max values
note: you need to do this because you don’t want your slider to move off page : )
If so, I moved the cursor
If not, I showed an error message

(I did not need to use OnKeyUp as it works both ways - you can use the slider or not)

The file is here
To use, you want to adjust the background image and hide (or delete) the original text label with the value.

SliderWithInput_JP.rp (96.9 KB)

1 Like