动态使用jQuery UI Slider? [英] Using jQuery UI Slider dynamically?

查看:160
本文介绍了动态使用jQuery UI Slider?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个jQuery UI滑块,如果用户在输入元素中键入数字,则滑块会适当移动.

I have a jQuery UI slider in which if the user types numbers into the input element the slider moves appropriately.

$("#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);
        });

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

But what i need is i want the slider to be in the middle whatever value i enter in the text box for the first time and then if i move the slider rightside means my value in the textbox has to increase and for leftside it has to decrease without setting these minimum and maximum values..

有什么建议吗?

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

what i need is when i enter 500 in the textbox my slider has to move to the center automatically..if i move the slider rightside the end must be 1000 and for leftside it must be 0 and if i enter 400 slider must move to center position automatically and the rightside end must be 800 and leftside 0

推荐答案

因此,您需要的是将滑块范围从0更改为在文本框中输入的值的两倍?我认为您可以在滑块上使用方法"option",例如:

So, what you need is to basically change the slider range from 0 to double whatever is entered in the text box? I think you can use the method "option" on the slider such as:

 $("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/

这篇关于动态使用jQuery UI Slider?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆