DecimalRangeField and IntegerRangeField field types do not render the value

[netllama]

When using DecimalRangeField and IntegerRangeField data types, the actual value that the field is set to (in the resulting slider) is never rendered. This behavior is also present in your own official example:

http://173.212.227.186/form

integerslider = IntegerRangeField(render_kw={'min': '0', 'max': '4'})

Is there some undocumented way to render the value of the slider? Otherwise, its confusing to know what value is being submitted, especially for a large range of values.

[natcobbinah]

1. Inherit Field from wtforms and override its call descriptor, to return a custom html Field eg: Could be a span
2. In your FormClass inheriting from FlaskForm, instantiate the Class which returns the Custom Html field
3. In your frontend, Use JavaScript to target both the RangeField and the CustomHTML field
4. Register, an input eventListener on the RangeField, such that with a movement on the slider, the corresponding value is registered on the the customHTML element

``
Example flask app
forms.py

from wtforms import IntegerRangeField, Field

class IntegerIndexRangeValueLabel(Field):
    def __call__(self,**kwargs):
        return "<span id='integer_index_range_value'>0</span>"

class  MyForm(FlaskForm):
     integerslider = IntegerRangeField(render_kw={'min': '0', 'max': '4', 'step': '1'})
     interger_slider_value = IntegerIndexRangeValueLabel(label='Slider Value')

In your templates folder, render the forms
Using Flask-bootstrap in this case

{% from 'bootstrap5/form.html' import render_form, render_field, render_form_row %}
<div> 
  {{ render_form(form)}}

 # import javascript file file
<script src="static/rangeval_display.js"></script>
</div>

In your static folder,
Eg: rangeval_display.js

let integer_slider = document.querySelector('#integerslider ')
let integer_slider_value = document.querySelector('#integer_index_range_value')

integer_slider_value .textContent = integer_slider .value;

integer_slider .addEventListener('input', (event) =>{
    integer_slider_value.textContent = event.target.value
})

And it should work as desired