jQuery реакция на смену слайдера

Question

Итак, у меня есть элемент данных таблицы HTML. Я хочу отразить любое значение, которое имеет ползунок.

<td id="firstBox"></td>
<td>
    <div class="sliderHolder">
        <input type="range" min="1" max="10" step="1" id="first">
    </div>
</td>

Теперь, когда я использовал обычный код JavaScript, я мог бы изменить значение # firstBox

firstSlider.oninput = function(){
    document.getElementById("firstBox").innerHTML = this.value;
}

Но когда я попытался использовать jQuery, я ничего не смог сделать (даже не поместил простое значение c int или строковое значение)

firstSlider.oninput = function(){
    $("#firstBox").val(this.value);
}

пс: даже присвоение HTML элементам атрибута name не помогло

Answer 1

td элементы не имеют значения. Вместо этого используйте text().

jQuery(function($) {
  $('#first').on('input', function() {
    $("#firstBox").text(this.value);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td id="firstBox">5</td>
    <td>
      <div class="sliderHolder">
        <input type="range" min="1" max="10" step="1" id="first" value="5" />
      </div>
    </td>
  </tr>
</table>

Answer 2

jQuery эквивалент .innerHTML - это метод .html(). Прямо сейчас вы добавляете this.value к атрибуту value элемента #firstBox.

Так что попробуйте вместо этого.

firstSlider.oninput = function(){
    $("#firstBox").html(this.value);
}

Answer 3

В первом примере (vanilla JavaScript) вы непосредственно устанавливаете внутренний HTML #firstBox, в то время как во втором примере вы устанавливаете значение #firstBox. Это неправильно, так как firstBox не является входом, поэтому у него нет значения.

Чтобы установить его внутри html, используя jQuery, вы должны сделать что-то вроде

$('#firstBox').html(this.value);

Answer 4

HTML5 обрабатывает только одно значение между атрибутом min и max. Если вы хотите, чтобы слайд обрабатывал минимальное и максимальное значение в одном входе пользовательского интерфейса, вы можете использовать ползунок jQueryUI: https://jqueryui.com/slider/#range

var value = $("input[type=range]").val();
$('#val').html(value)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" min="1" max="10" value="7" step="1" id="first">

<p id="val"></p>