Rangeslider.js设置范围的默认最小值,最大值

时间:2019-10-02 14:49:04

标签: jquery rangeslider

我正在使用模板,rangeslider初始化看起来像这样:

$(".range-slider-ui").each(function () {
        var minRangeValue = $(this).attr('data-min');
        var maxRangeValue = $(this).attr('data-max');
        var currMin = $(this).attr('data-curr-min');
        var currMax = $(this).attr('data-curr-max');
        var minName = $(this).attr('data-min-name');
        var maxName = $(this).attr('data-max-name');
        var unit = $(this).attr('data-unit');

        $(this).append("" +
            "<span class='min-value'></span> " +
            "<span class='max-value'></span>" +
            "<input class='current-min' type='hidden' name='"+minName+"'>" +
            "<input class='current-max' type='hidden' name='"+maxName+"'>"
        );
        $(this).slider({
            range: true,
            min: minRangeValue,
            max: maxRangeValue,
            step: 100,
            values: [minRangeValue, maxRangeValue],
            slide: function (event, ui) {
                event = event;
                var currentMin = parseInt(ui.values[0]);
                var currentMax = parseFloat(ui.values[1]);
                $(this).children(".min-value").text( currentMin + " " + unit);
                $(this).children(".max-value").text(currentMax + " " + unit);
                $(this).children(".current-min").val(currentMin);
                $(this).children(".current-max").val(currentMax);
            }
        });

        var currentMin = parseInt($(this).slider("values", 0));
        var currentMax = parseFloat($(this).slider("values", 1));
        $(this).children(".min-value").text( currentMin + " " + unit);
        $(this).children(".max-value").text(currentMax + " " + unit);
        $(this).children(".current-min").val(currentMin);
        $(this).children(".current-max").val(currentMax);

    });

我唯一添加的是

var currMin = $(this).attr('data-curr-min');
var currMax = $(this).attr('data-curr-max');

我正在从服务器传递当前的最小和最大设置。这些属性具有正确的值。我要做的就是设置默认的最小值和最大值。我尝试简单地设置

values: [currMin, currMax]

但这会导致问题。必须有一种简单的方法来执行此操作,但是我尝试过的所有方法都无法正常工作。任何建议表示赞赏。

2 个答案:

答案 0 :(得分:0)

尝试.html()代替.val()

$(this).children(".current-min").html(currentMin);

答案 1 :(得分:0)

我后来确定这是一个缓存问题。我最初发布的代码可以正常工作。