如何使用输入滑块范围中的值？

Question

我的 html 页面中有一个滑块，其值从 0 到 0.5：

 <form method="POST" action="{% url 'words_url' id %}"   class="words">
   {% csrf_token %}
   <fieldset>
   <label for="rangeVal">Popularity threshold</label>
   <input type ="range" max="0.5" min="0"
   oninput="document.getElementById('rangeValLabel').innerHTML = this.value;"
   step="0.01" name="rangeVal" id="rangeVal" value="0.7">
   </input>
   <em id="rangeValLabel" style="font-style: normal;"></em>
   </fieldset>
   
   {{ form|crispy }}

我在同一页面 html 中有一个由“vues.py”中的函数生成的单词列表：

 def funct_words(request, id) :
     dict={"new":0.3,"blue":0.6,"Green":0.04}

     return dict.keys()

所以在页面 html 中，我们有滑块和生成的单词没有值..

  the slider : ----------------------------------
  generated words: new,blue,Green

如果我们将光标更改为 0.4：它会显示在同一页面中：

   the slider : ---------------------------------- 0.4
  generated words: new

我想做类似的事情： 一开始，它显示所有单词，然后如果我将光标移动到 0.4，它会将此值发送到 views.py 以仅获取值

Answer 1

你是这个意思吗？

function updateTextInput(value) {
console.log(value)
// here you could do the logic and send to your server.
}

<input value="0" type="range" oninput="updateTextInput(this.value);" onchange="updateTextInput(this.value);" />