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

Question

I have in my html page a slider with value from 0 to 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 }}

and i have in the same page html a list of words generated by a function in "vues.py":

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

     return dict.keys()

so in the page html, we have the slider and the generated words without value..

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

if we change cursor to 0.4: it display in tha same page just:

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

i want to do something like: at the beginning, it display all words, then if i move the cursor to 0.4, it send this value to views.py to get only words which have value < 0.4, then it display the results in the same page html (I want only to get the value from the slider after the mouse is released, not during the mousedown and drag, then send the value to the vues.py then get the corresponding result.. help please?

Answer 1

Do you mean this?

 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);" />