Ошибка ползунка диапазона пользовательского интерфейса jQuerty после изменения минимального значения

Question

У меня есть один слайдер на моей странице с этим кодом

<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.") );
});

Это работает очень хорошо, но если я пытаюсь изменить min: 0, на min: dataMin,

Мой слайдер перестал работать (я не могу его перетащить). Он продолжает вызывать postAjaxSearch(); но он не меняет значение max/min и не перемещает ползунок.

Почему мне нужно изменить min на dataMin? Потому что мой ползунок начинается с 0, а ползунок перемещается из dataMin из dataMax. Диапазон между dataMin и 0 находится на странице, но не может двигаться туда. Я не хочу этого, слайдер должен начинаться с dataMin.

Работает, но с этим пробелом слева (мин: 0) Пробела нет, но не работает (мин: dataMin)

Answer 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]);
        }
    });

Я понятия не имею, почему это работает, казалось бы логичным, что обе крайности будут работать одинаково, но, по-видимому, они не работают.