Question

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

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

所以我需要这个：

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

使用它：

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

Answer 1

试试这种方式

这是Html部分

    <div class="slider"></div>
    <p>Your slider has a value of <span class="slider-value"></span></p>
    <input type="number" class="test" value="0"></input>

脚本如下所示

$(".slider").slider(
{
            value:1,
            min: 0,
            max: 100,
            step: 1,
            slide: function( event, ui ) {
                $( ".slider-value").html( ui.value );
            }
}
);

$( ".slider-value").html(  $('.slider').slider('value') );

$('.test').change(function () {
        var value = this.value;

        $('.slider').slider("value", value);
         $( ".slider-value").html( value );
    })

试试这个，它会起作用。

Answer 2

既然你提到了一些.net回发，我想你可以使用一个隐藏的输入，它应该通过回发机制发送到服务器（希望，我不会进入.net < / em>的）：

$('#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">

jQuery UI滑块适用于输入

2 个答案: