Question

我努力为我的bootstrap-slider栏设置新价值。我想用我的文本框和滑块创建双向绑定，因此如果我的滑块或文本值被更改，则文本框值会发生变化而相反。我的第一部分是正确的，如果滑块值发生变化，那么我的文本框也会发生变化，但是如果我想从我的文本框向滑块发送一个新值，那么它会很棘手而且它不起作用。

HTML：

<div class="editor-field" style="margin-top: 5px">
    <div class="col-sm-6" style="text-align: center">
        <label for="price-max" style="margin-right: 10px">Max Price</label>
        <input type="text" id="price-max" name="price-max" data-number="0">
    </div>
    <div class="col-sm-6" style="text-align: center">
        <label for="price-min" style="margin-left: 15px">Min Price</label>
        <input type="text" id="price-min" name="price-min" data-number="0">
    </div>
    <div style="margin-top: 5px; margin-right: 170px">
        <input type="text" name="price" id="price">
    </div>
</div>

使用Javascript：

$(function () {
            var objectValues =
                {
                    vArray: [0, 0]
                };


            $("#price").slider({ min: 0, max: 50000000, value: objectValues.vArray, focus: true });

            $("#price").change(function () {
                var sliderArr = $("#price").val().split(',');

                $("#price-min").val(commafy(sliderArr[0]));
                $("#price-min").attr('data-number', sliderArr[0]);
                $("#price-max").val(commafy(sliderArr[1]));
                $("#price-max").attr('data-number', sliderArr[1]);

            });

            $("#price-min").change(function () {
                $(this).data('number', $(this).text());

                var ownNumber = $(this).data('number');
                var external = $("#price-max").data('number');

                var _slider = $("#price").slider();
            _slider
               .slider('setValue', ownNumber)
               .slider('setValue', external);

            });

            $("#price-max").change(function () {
                $(this).data('number', $(this).text());

                var ownNumber = $(this).data('number');
                var external = $("#price-min").data('number');

                var _slider = $("#price").slider();
            _slider
               .slider('setValue', ownNumber)
               .slider('setValue', external);


            });
        });

        function commafy(num) {
            var str = num.toString().split('.');
            if (str[0].length >= 5) {
                str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
            }
            if (str[1] && str[1].length >= 5) {
                str[1] = str[1].replace(/(\d{3})/g, '$1 ');
            }
            return str.join('.');
        }

我收到的错误：

未捕获的TypeError：无法读取属性＆＃39; toFixed＆＃39;未定义的

Answer 1

我在这里创建了一个jsfiddle： https://jsfiddle.net/mxmz_/d13cue6z/1/尝试使用您的脚本似乎以下行存在问题：

_slider.slider('setValue', 123);

你在哪里发现它是滑块的合法命令？只需查看此处的文档（http://seiyria.com/bootstrap-slider/），我找不到与此相关的任何内容。

这里有一个名为setValue的函数： https://github.com/seiyria/bootstrap-slider/blob/master/dist/bootstrap-slider.js#L870

Answer 2

要实现这一目标，我需要验证最大值和最小值，并将其包括在setValue中，如下所示：

    $(function () {
        var objectValues =
            {
                vArray: [0, 0]
            };


        var _slider = $("#price").slider({ min: 0, max: 100000, value: objectValues.vArray, focus: true });

        $("#price").change(function () {
            var sliderArr = $("#price").val().split(',');

            $("#price-min").val(commafy(sliderArr[0]));
            $("#price-min").attr('data-number', sliderArr[0]);
            $("#price-max").val(commafy(sliderArr[1]));
            $("#price-max").attr('data-number', sliderArr[1]);

        });

        $("#price-min").on("blur change keyup focus leave", function () {
            var $this = $(this);
            var val = unCommafy($this.val());
            if (val == null || val === undefined || val.length == 0) val = 0;
            var max = _slider.slider('getValue')[1];
            _slider.slider('setValue', [val * 1, max]);

        });

        $("#price-max").on("blur change keyup focus leave", function () {

            var $this = $(this);
            var val = unCommafy($this.val());
            if (val == null || val === undefined || val.length == 0) val = 0;
            var min = _slider.slider('getValue')[0];
            _slider.slider('setValue', [min, val * 1]);

            return;

            $(this).data('number', $(this).text());

            var ownNumber = $(this).data('number');
            var external = $("#price-min").data('number');

            _slider
               .slider('setValue', ownNumber)
        });
    });

    function commafy(num) {
        var str = num.toString().split('.');
        if (str[0].length >= 5) {
            str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
        }
        if (str[1] && str[1].length >= 5) {
            str[1] = str[1].replace(/(\d{3})/g, '$1 ');
        }
        return str.join('.');
    }

    function unCommafy(val) {
        if (val === undefined || val === null) return "";
        val = val + "";
        while (val.indexOf(',') > -1)
            val = val.replace(',', '');
        return val;
    }

将新值设置为引导滑块

2 个答案: