显示当前值和输入值

Question

我创建了简单的范围滑块，这是我的代码

$(".slider").slider({
  max: 120,
  min: 30
}).slider("pips");

<div class="slider"></div>

我会知道如何在滑块上方显示带有当前值的标签，以及如何将当前值传递给输入隐藏表单。我应该在 value="" 中输入什么来获取当前滑块选择的值？

<input type="hidden" value="" name="setting">

Answer 1

要执行您需要的操作，请挂钩滑块的 slide 或 change 事件。传递给这些事件的处理函数的参数允许您访问当前值，该值允许您根据需要更新 DOM：

let $label = $('.slider-label');
let $value = $('.slider-value');

$(".slider").slider({
  max: 120,
  min: 30,
  slide: (e, ui) => {
    $label.text(ui.value);
    $value.val(ui.value);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<p class="slider-label">30</p>
<input type="text" class="slider-value" value="30" name="setting" />
<div class="slider"></div>

另请注意，slider('pips') 不是 jQueryUI 滑块插件的有效调用，会导致错误。您应该删除该行。

显示当前值和输入值

Show current value and input value

jquery

user-interface

jquery-ui