jquery UI Slider 怎么设置小数

Posted 2023-04-02

jquery UI Slider 怎么设置取值范围为小数啊，有没有参数可以设置的

我是2个表单滑动：
比如从：1-10的小数滑动（1.1,1.2...9.8,9.9,10）

$( "#slider-rangec" ).slider(

     range: true,

     min: 10,

     max: 100,

     values: [10, 100 ],    //这里范围设置10倍

     slide: function( event, ui ) 

     $( "#input_1" ).val(ui.values[ 0 ]/10);

     $( "#input_2" ).val(ui.values[ 1 ]/10);

);

$( "#input_1" ).val( 1 );$( "#input_2" ).val( 10 );    //这里初始化正常整数

参考技术A jquery UI Slider 怎么设置小数
悬赏分:0
|
离问题结束还有 13 天 22 小时
|
提问者:
问题补充:
jquery UI Slider 怎么设置取值范围为小数啊，有没有参数可以设置的
您不登录也可以回答问题
用户名:
密码码:
记住我的登录状态
登 录
使用可以第一时间收到“提问有新回答”“回答被采纳”“网友求助”的通知。
您想在自己的网站上展示百度“知道”上的问答吗？来吧，
如要投诉或提出意见建议。 参考技术B jquery UI Slider 怎么设置小数
悬赏分：0
|
离问题结束还有 13 天 22 小时
|
提问者：
问题补充：
jquery UI Slider 怎么设置取值范围为小数啊，有没有参数可以设置的
您不登录也可以回答问题
用户名：
密码码：
记住我的登录状态
登 录
使用可以第一时间收到“提问有新回答”“回答被采纳”“网友求助”的通知。
您想在自己的网站上展示百度“知道”上的问答吗？来吧！
如要投诉或提出意见建议，
请到反馈。 参考技术C 指定step: 0.1， 即增加的步进值
min: min,
max: max,
value: min,
orientation: "horizontal",
range: "min",
step: 0.1,
animate: true,
create: () =>
value.text(min);
,
.....

jQuery-ui slider - 如何阻止两个滑块相互控制

这是参考之前提出的question

这里的问题是，每个slider控制另一个。它会产生反馈。

我怎么可能阻止它？

$(function() {
    $("#slider").slider({ slide: moveSlider2 });
    $("#slider1").slider({ slide: moveSlider1 });
    function moveSlider2( e, ui ) 
    {
        $('#slider1').slider( 'moveTo', Math.round(ui.value) );
    }

    function moveSlider1( e, ui ) 
    {
        $('#slider').slider( 'moveTo', Math.round(ui.value) );
    }
});

答案

这有点像黑客，但有效：

$(function () {
    var slider = $("#slider");
    var slider1 = $("#slider1");
    var sliderHandle = $("#slider").find('.ui-slider-handle');
    var slider1Handle = $("#slider1").find('.ui-slider-handle');

    slider.slider({ slide: moveSlider1 });
    slider1.slider({ slide: moveSlider });

    function moveSlider( e, ui ) {
        sliderHandle.css('left', slider1Handle.css('left'));
    }

    function moveSlider1( e, ui ) {
        slider1Handle.css('left', sliderHandle.css('left'));
    }
});

基本上，您可以通过直接操作css来避免反馈，而不是触发幻灯片事件。

另一答案

你可以存储一个var CurrentSlider ='slider';

在任一滑块上的mousedown上，将CurrentSlider值设置为该滑块，

并在你的moveSlider（...）方法中检查这是否是CurrentSlider，如果没有，你不传播滑动（避免反馈）

另一答案

你可以给你的moveSlider1和moveSlider2函数提供一个可选参数，当设置为true值时，它会抑制递归。

另一答案

一种更简单的方法，它是上述答案的混合体：

    var s1 = true;
    var s2 = true;
    $('#slider').slider({
        handle: '.slider_handle',
        min: -100,
        max: 100,
        start: function(e, ui) {
        },
        stop: function(e, ui) { 
        },
        slide: function(e, ui) {
            if(s1)
            {
                s2 = false;
                $('#slider1').slider("moveTo", ui.value);
                s2 = true;
            }
        }
    });


    $("#slider1").slider({ 
        min: -100, 
        max: 100,
        start: function(e, ui) {
        },
        stop: function(e, ui) { 
        },
        slide: function(e, ui) {
            if(s2)
            {
                s1 = false;
                $('#slider').slider("moveTo", ui.value);
                s1 = true;
            }
        }
        });

});

另一答案

现在尝试这个，并且所有答案都可能由于jquery ui的更改而无效。

如果你更换Badri的解决方案

$('#slider').slider("moveTo", ui.value);

同

$('#slider').slider("option", "value", ui.value);