在 wtforms.fields.html5.DecimalRangeField 旁边显示滑块值

【问题标题】：Displaying slider value alongside wtforms.fields.html5.DecimalRangeField在 wtforms.fields.html5.DecimalRangeField 旁边显示滑块值
【发布时间】：2015-09-17 04:01:46
【问题描述】：

我正在尝试在我的 wtforms.fields.html5.DecimalRangeField 旁边显示滑块值。我当前的代码（下面的相关摘录）仅呈现滑块，没有任何价值。到目前为止，我看到的所有examples 都是纯 HTML5 代码，我缺乏关于如何使用我的 jinja2 模板作为起点来执行此操作的方向。

有什么建议吗？

从 main.py 中提取：

class MyForm(Form):
    MyField = DecimalRangeField('Age', [validators.NumberRange(min=1, max=100)])

从 form.html 中提取

<div>{{ wtf.form_field(form.MyField) }}</div>

【问题讨论】：

标签： python html flask jinja2 flask-wtforms

【解决方案1】：

试试这个代码 (gist)：

from flask import Flask, render_template_string
from wtforms import Form
from wtforms.fields.html5 import DecimalRangeField


app = Flask(__name__)
app.config['DEBUG'] = True

TPL = '''
<!DOCTYPE html>
<html>
<head>
<script>
function outputUpdate(age) {
    document.querySelector('#selected-age').value = age;
}
</script>
</head>
<body>
<form>
    <p>
       {{ form.age.label }}:
       {{ form.age(min=0, max=100, oninput="outputUpdate(value)") }}
       <output for="age" id="selected-age">{{ form.age.data }}</output>
    </p>
</form>
</body>
</html>
'''

class TestForm(Form):
    age = DecimalRangeField('Age', default=0)


@app.route("/")
def home():
    form = TestForm(csrf_enabled=False)
    return render_template_string(TPL, form=form)


if __name__ == "__main__":
    app.run()

【讨论】：