【问题标题】:jQuerty UI range slider bug after change min value更改最小值后的jQuery UI范围滑块错误
【发布时间】:2017-04-13 18:58:02
【问题描述】:

我的页面中有一个滑块,使用此代码

<div id="sale-price-range" class="price-range" data-min="200000" data-max="2000000" data-unit="R$" data-min-field="precoMinVenda" data-max-field="precoMaxVenda" data-increment="100000"></div>

我的js代码是:

// Price Range
$(".price-range").each(function() {

    var dataMin = $(this).attr('data-min');
    var dataMax = $(this).attr('data-max');
    var dataUnit = $(this).attr('data-unit');
    var minField = $(this).attr('data-min-field');
    var maxField = $(this).attr('data-max-field');
    var increment = $(this).attr('data-increment');

    $(this).append( "<input type='text' class='first-slider-value' name='"+minField+"' val=''/><input type='text' class='second-slider-value' name='"+maxField+"'/>" );

    $(this).slider({
        range: true,
        min: 0,
        max: dataMax,
        step: increment,
        values: [ dataMin, dataMax ],

        slide: function( event, ui ) {
            event = event;
            if(ui.value < dataMin) {
                return false;
            }
            $(this).find( ".first-slider-value" ).val( dataUnit + " " + ui.values[ 0 ].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.") );
            $(this).find( ".second-slider-value" ).val( dataUnit + " " + ui.values[ 1 ].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.") );
        },
        stop: function(event,ui) {
            if(ui.value >= dataMin) {
                postAjaxSearch();
            }
        }
    });
     $(this).find( ".first-slider-value" ).val( dataUnit + " " + $( this ).slider( "values", 0 ).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.") );
     $(this).find( ".second-slider-value" ).val( dataUnit + " " +  $( this ).slider( "values", 1 ).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.") );
});

效果很好,但如果我尝试改变 分钟:0, 到 最小值:数据最小值,

我的滑块停止工作(我无法拖动它)。它继续调用 postAjaxSearch();,但它不会改变最大/最小值,也不会移动滑块句柄。

为什么我需要将 min 更改为 dataMin? 因为我的滑块从 0 开始,但是滑块句柄从 dataMin 从 dataMax 移动。 dataMin 和 0 之间的范围在页面上,但不能移动到那里。我不要这个,滑块应该从dataMin开始。

Work, but with this space on left (min: 0) No space, but doesn't work (min: dataMin)

【问题讨论】:

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


    【解决方案1】:

    我遇到了同样的问题,我通过在最小值上使用 parseInt() 解决了这个问题

    $("#price-slider").slider({
            range: true,
            min: parseInt(price_min),
            max: price_max,
            values: [price_min, price_max],
            slide: function (event, ui) {
                $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
            }
        });
    

    我不知道为什么会这样,这似乎是合乎逻辑的,两个极端都会起作用,但显然它们不会。

    【讨论】:

    • Dennis,我也用 parseInt 解决了这个问题,但是我忘了在这里发布解决方案。谢谢,您的回答绝对正确。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-10-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-02-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多