Range Input display Min Max Values and show Selected Value

Hi all,

I have been banging my head off a brick wall with this range slider.

This is currently what I see.

I am setting the max values via a dmx-bind.

<input id="slide_value" name="slide_value" type="range" class="form-control" min="0" dmx-bind:max="ParentDetails.data.parentdetails[0].mmCurrentAvailableFunds">

I want to have the slider show a Min(default to zero) and Max value from the dmx-bind and then also update the text input with the value selected on the slider like below.

Any help would be most grateful.








@ben Thanks for the response.

Your solution will work exactly like I wanted (and I will now use), however, I was actual trying to implement this strictly via the Wappler designer using the built in functions.

But, thank you!

are you just trying to display the range input value in some text input?

@Teodor, Yes. So when the user moves the slider, it will dynamically populate into a text input.

Now, I will also like it to display it as text on the screen, as I will then put the text input as hidden.

I can use the Span tags to display the min/max values.


Well that’s one of the easiest things to do in Wappler. The dynamic attributes are used exactly for this …

  1. Select the text input
  2. Add new dynamic attribute > input > value
  3. Select the range inpuit > value in the dynamic data picker

The same way you can bind the range value in a Paragraph on your page - just select it in the dynamic data picker.

1 Like

@Teodor, F#%@… OMG… That’s what I get for trying to work on a site @ 1:30 a.m. !

I kept trying to preform the action on the range slider with a value update action. I never thought of just having the text input pulling the value from the range slider.

Need to pull my head from out of my ass.


1 Like

That’s a good read, some use cases where dynamic attributes could be useful:

1 Like

Using Dynamic Attributes does not (in this case) work for a p element.

You can either use dynamic attributes > display > inner text, or directly bind the value in the p, no need of any custom js code for this.

1 Like

Oops, I take back what I said. It does work.

1 Like

Yes, I am continuing this conversation just for old-times sake.

I have this javascript in my head, although I also originally loaded it down in the footer page area.

var slider = document.getElementById(“text1”);
var output = document.getElementById(“value”);
output.innerHTML= slider.value;
slider.oninput = function() {
output.innerHTML = this.value;

In the body of my form where I also had tried span id = “value” but saw nothing displayed.

  <input id="text1" name="text1" type="range" class="custom-range" min="0" max="16" dmx-html="this.value">
  <p class="font-weight-bold">Value: <span id="this.value"></span></p>

With this disappointing result.