Django 表单输入范围如何显示值?

Question

我有一个关于 Django 2 中范围输入的问题。 如何显示输入范围滑块的当前值？ 现在它唯一没有任何值的滑块。Maby 我应该在每次更改时保存价值，但我正在寻找简单性。

形式：

scale = forms.IntegerField(widget=forms.NumberInput(attrs={'type':'range', 'step': '5', 'min': '-100', 'max': '100'}), required=False)

模板：

{{表单.scale}}

这是它的样子

Answer 1

为 Slider 指定 ID 属性，以便脚本可以识别此元素。

scale = forms.IntegerField(widget=forms.NumberInput(attrs={'type':'range', 'step': '5', 'min': '-100', 'max': '100', 'id':'myRange'}), required=False)

然后在模板中添加：

<div>
# This is how your element will be rendered
<input type="range" min="-100" step="5" max="100" value="50"  id="myRange">
# ADD THIS
<p>Value: <span id="demo"></span></p>
</div>
# AND ALSO THIS
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script> 

这里还有一个例子： https://django-floppyforms.readthedocs.io/en/latest/examples.html