在滑块旁边显示 IntegerRangeField 的值 WTForms Python Flask

Question

我制作了一个包含 IntegerRangeField 的表单，我希望滑块旁边有一个数字，用于显示滑块的值并在其更改时更新它。

形成班级

class ActivityQuantityForm(FlaskForm):
    activityQuantity = IntegerRangeField("quantity")
    submit = SubmitField()

HTML `

{% if activity_quantity_form %}

<form method="POST" class="form-container">
    <div>
        <label for="quantity" class="roboto-light-500">Quantity</label>
        <div class="form-item">
            {{ activity_quantity_form.activityQuantity(class="form-input") }}
            {% for error in activity_quantity_form.activityQuantity.errors %}
                {{ error }}
            {% endfor %}
        </div>
        <div>
            <p>{{ activity_quantity_form.activityQuantity.data }}</p>
        </div>
    </div>
    {% if fade_in == "activity_quantity_form" %}
        <div>
            {{ activity_quantity_form.submit(class="submit-button") }}
        </div>
    {% endif %}
</form>

{% endif %}

`

Answer 1

您可以使用 javascript 更改元素内容。我在我的电脑上测试了这段代码，效果很好：

{% if activity_quantity_form %}
    <form method="POST" class="form-container">
        <div>
            <label for="quantity" class="roboto-light-500">Quantity</label>
            <div class="form-item">
                {{ activity_quantity_form.activityQuantity(class="form-input", oninput="changeRangeValue()") }}
                {% for error in activity_quantity_form.activityQuantity.errors %}
                    {{ error }}
                {% endfor %}
            </div>
            <div>
                <p class="range-value">50</p>
            </div>
        </div>
        {% if fade_in == "activity_quantity_form" %}
            <div>
                {{ activity_quantity_form.submit(class="submit-button") }}
            </div>
        {% endif %}
    </form>
{% endif %}

<script>
let range = document.querySelector('.form-input');
let rangeValue = document.querySelector('.range-value');

function changeRangeValue() {
    // get range value
    let val = range.value;

    // set this value in <p>
    rangeValue.innerHTML = val;
}
</script>