Range Input display Min Max Values and show Selected Value

[raymantle]

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.

Thanks
Ray.

[ben]

HTML:

JS:

Result:

[raymantle]

@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!
Ray.

[Teodor]

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

[raymantle]

@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.

Ray.

[Teodor]

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.

[raymantle]

@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.

Thanks
Ray.

[Teodor]

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

Dynamic Attributes

[ben]

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

[Teodor]

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.

[ben]

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

[NewMedia]

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.

<script>
var slider = document.getElementById(“text1”);
var output = document.getElementById(“value”);
output.innerHTML= slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>

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.