【问题标题】:Jquery UI Slider Increment and decrementJquery UI Slider 增量和减量
【发布时间】:2014-11-25 02:47:52
【问题描述】:

我有一个滑块,它有 4 个处理程序,每个处理程序都有自己的减量和增量弹出窗口, 如何在单击减号(-)和加号(+)按钮时移动滑块。

请帮忙..

【问题讨论】:

    标签: jquery user-interface uislider


    【解决方案1】:

    根据documentation

    你可以像这样设置值

    $( ".selector" ).slider( "option", "value", 10 );
    

    var slider = $( "#slider" ).slider();
    
    slider.slider('value',10);
    

    使用您的逻辑来增加或减少值

    更新

    检查this更新的小提琴

    我稍微改变了逻辑

    $(document).ready(function(){
        var i = parseInt(160);  
        var values = [140, 160, 180, 200];
        var vitalslider = slider(values);
    
        $('#increment').on('click', function(){
            i++;
            values[1] = i;
            vitalslider.limitslider('destroy');
            vitalslider = slider(values);
        });
        $('#decrement').on('click', function(){
            i--;
            values[1] = i;
            vitalslider.limitslider('destroy');
            vitalslider = slider(values);
        });
    
        function slider(values){
            return  $('#basic').limitslider({
                        values: values,
                        value:'',
                        min: 140,
                        max: 200,
                        limitCls:'vital_limit',
                        showRanges: true,
                        left: 100,
                        label: true,
                        ranges: [false, true, true, true]
                    });
        }
    });
    

    【讨论】:

    • var slider = $('#basic').limitslider(); slider.limitslider("option", "value", 10); 我有 4 个处理程序,所以我也使用了值。 slider.limitslider("option", "values", handlerindex, 10); ** 它移动黑色圆圈但不移动滑块。 **
    • 创建一个 jsfiddle 重现问题并分享它。
    • 欢迎来到stackoverflow。在此 QA 站点中,当实现答案时,我们不会在问题标题后附加“(已解决)”。相反,我们通过单击该答案左上角的复选框来标记正确答案。如果您自己想出了答案,然后发布您自己的答案,给它一些时间,如果没有人有更好的答案(您的判断),您可以在 48 小时的等待期后接受自己的答案。
    • 嗨 Cerlin,第一个处理程序和最后一个处理程序怎么样,它不会向左或向右移动。你能帮帮我吗?
    • values 是一个从 0 到 3 的数组索引。所以如果你更新它就会起作用
    猜你喜欢
    • 2012-03-27
    • 2018-11-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-06-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多