jQuery UI slider 应用于输入

Question

您好我想知道为什么不能在输入上应用 jQuery UI slider 对象？

对于实现限制，我只能在输入上应用 jQuery UI slider ，但这不起作用，如下所示:JSFIDDLE .谁能告诉我是否可以通过设置一些额外的 CSS 类/jQuery 代码将其应用于输入？

所以我需要这个:

<input type="number" class="slider" value="0"></input>

处理这个:

$(".slider").slider();

Answer 1

由于您提到了一些 .net 回发，我认为您可以使用隐藏输入来解决问题，该输入应该通过回发机制发送到服务器(希望我不喜欢 .net):

$('#slider').slider({
  min: 1,
  max: 99,
  slide: function(event, ui) {
    $(this).next(':hidden').val(ui.value);
    console.log($(this).next(':hidden').val());
  }
});

<link href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="slider"></div>
<input type="hidden" name="slide-value">