с использованием формы jquery и html для отображения значения диапазона

Question

Я включил форму на своем веб-сайте с ползунками, используя форму ввода диапазона html. Хотя диапазон не показывает фактическое значение по умолчанию, я нашел скрипт для отображения дисплея, например, «спальни» и «ванные комнаты».

P.S. Когда я отправляю форму с использованием php, значения разные. Это хорошо.

Надеясь, что на дисплее отображаются отдельные значения диапазона для каждой спальни и секций ванной комнаты, а не показаны одинаковые значения, пока ползунки движутся. Возможно, предоставление отдельной переменной для обоих может привести к индивидуальному выпуску? Как я могу это сделать? Может ли кто-нибудь помочь с этим?

var range = $('.input-range'), 
 
    value = $('.range-value'); 
 
value.html(range.attr('value')); 
 
range.on('input', function() { 
 
    value.html(this.value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<form id="form" name="form" method="post" target="formfill" action="form-to-email.php"> 
 
    
 
     <div class="field"> 
 
     <label for="Bedrooms">Bedrooms</label> 
 
     </div> 
 
     <div class="range-slider"> 
 
     <input class="input-range" type="range" value="1" min="0" max="10"> 
 
     </div> 
 
     <span class="range-value"></span> 
 
     <div class="field"> 
 
     <label for="bathrooms">Bathrooms</label> 
 
     </div> 
 
     <div class="range-slider"> 
 
     <input class="input-range" type="range" value="1" min="0" max="10"> 
 
     </div> 
 
     <span class="range-value"></span> 
 

 
</form>

Answer 1

Проблема здесь:

range.on('input', function() { 
    // this sets the html content of all elements with class range-value 
    // to the value of the slider that is being moved 
    value.html(this.value); 
}); 

Исправление, я показываю просто перемещает span тег в DIV, это просто один из способов узнать, что .range-value принадлежит для ползунка ведьмы.

Кроме того, поскольку value="1" закодирован в ползунки диапазона, вы также можете просто теги пролетных начать с тем же значением <span class="range-value">1</span>

$('.input-range').on('input', function() { 
 
    $(this).next('.range-value').html(this.value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class="range-slider"> 
 
    <input class="input-range" type="range" value="1" min="0" max="10"> 
 
    <span class="range-value">1</span> 
 
</div> 
 

 
<div class="range-slider"> 
 
    <input class="input-range" type="range" value="1" min="0" max="10"> 
 
    <span class="range-value">1</span> 
 
</div>

Я удалил CSS и большинство HTML из ответа, поскольку он не имеет отношения к проблеме, но чтобы он работал в полной форме. here is a demo