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.

image.png1099×234 2.94 KB

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.

image.png1197×220 5.11 KB

Any help would be most grateful.

Thanks
Ray.