动态使用jQuery UI Slider?

时间:2012-02-27 10:13:52

标签: jquery jquery-ui jquery-ui-slider

我有一个jQuery UI滑块,如果用户在输入元素中键入数字,滑块会相应移动。

$("#slider-range-min").slider({
            range: "min",
            value: 1,
            step: 1000,
            min: 0,
            max: 5000000,
            slide: function (event, ui) {
                $("input").val(ui.value);
            }
        });
        $("input").change(function (event) {
            var value1 = $("input").val();
            $("#slider-range-min").slider("option", "value", value1);
        });

但我需要的是我希望滑块位于中间,无论我第一次在文本框中输入什么值,然后如果我移动滑块右侧意味着我在文本框中的值必须增加并且为了左侧必须减少而不设置这些最小值和最大值..

有什么建议吗?

编辑:我需要的是当我在文本框中输入500时,我的滑块必须自动移动到中心..如果我将滑块移到右侧,则末端必须为1000,对于左侧,它必须为0,如果我输入400滑块必须自动移动到中心位置,右侧端必须为800,左侧为0

2 个答案:

答案 0 :(得分:3)

那么,你需要的是基本上将滑块范围从0改为双倍在文本框中输入的内容?我认为您可以在滑块上使用方法“选项”,例如:

 $("input").change(function (event) {
     var value1 = parseFloat($("input").val());
     var highVal = value1 * 2;
     $("#slider-range-min").slider("option", {"max": highVal, "value": value1});
 });

编辑:这是一个小提琴 - http://jsfiddle.net/cXYC4/

答案 1 :(得分:0)

我不确定,但这可行:http://flowplayer.org/tools/rangeinput/