带文本框输入的UI滑块

问题描述：

我们使用了一个用户界面滑块，它的工作原理完美无瑕。带文本框输入的UI滑块

代码：

jQuery(function() { 
jQuery("#slider-range-min").slider({ 
    range: "min", 
    value: 1, 
    step: 1000, 
    min: 0, 
    max: 5000000, 
    slide: function(event, ui) { 
     jQuery("#amount").val("$" + ui.value); 
    } 
}); 
jQuery("#amount").val("$" + $("#slider-range-min").slider("value")); 
});

正如你所看到的，我们允许用户挑选0和5,000,000任何东西。

HTML是：

<div id="slider-range-min" style="width: 460px; float:left;margin:10px;"></div>

我想要做的就是添加它在和谐与滑块的作品，文本输入元件，以便用户滑动texy箱增加，减少一切..

或者，如果用户在输入元素中键入数字，则滑块会适当移动。

请帮忙吗？

Preview是：

enter image description here

我想你可以使用[范围与固定的最小示例]（http://jqueryui.com/demos/slider/hotelrooms.html）鞭打一些东西。 –

谢谢@rfausak会检查出来 – 422

仅供参考：同时发现灯丝组已经达到了这个目标，但看起来它们是唯一的灯丝组.. http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/想要看到其他 – 422

答

您需要在slide更新input元素（像你现在这样的#amount元素）：另外

$("#slider").slider({ 
    range: "min", 
    value: 1, 
    step: 1000, 
    min: 0, 
    max: 5000000, 
    slide: function(event, ui) { 
     $("input").val("$" + ui.value); 
    } 
});

，你需要绑定到input元素的change事件并调用滑块的value方法：

$("input").change(function() { 
    var value = this.value.substring(1); 
    console.log(value); 
    $("#slider").slider("value", parseInt(value)); 
});

例子：http://jsfiddle.net/andrewwhitaker/MD3mX/

有没有验证怎么回事（必须包括 “$” 符号，它的工作）。你可以添加一些更强大的输入卫生来加强它。

That's great安德鲁，我看到的唯一问题是用户无法输入输入元素，滑块移动到该价位，直到您单击输入。我认为可以添加onkeyup嘿..但是，伟大的代码，投票了 – 422

@ 422：*应该*工作，你可能不得不输入一个大的值来看看它（尝试** 3000000 **例如） –

更改div到

并且在输入时仍然不会自动更新，即使数字较大也是如此。除非它的一个jsfiddle问题，将移植到HTML和测试 – 422

带文本框输入的UI滑块

相关推荐