Question

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

表格：

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

模板：

this how it looks like

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

django表单输入范围如何显示值？

1 个答案: