1

我正在努力为我的引导滑块设置新值。我想用我的文本框和滑块创建双向绑定，所以如果我的滑块或文本值发生变化，文本框值会发生变化并且相反。我的第一部分是正确的，如果滑块值发生变化，我的文本框也会发生变化，但是如果我想从我的文本框向滑块发送一个新值，它会很棘手并且它不起作用。

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

我收到的错误：

未捕获的类型错误：无法读取未定义的属性“toFixed”

4

2 回答 2

1

为了实现这一点，我需要验证最大值和最小值，并包括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;
    }
于 2017-11-20T13:58:34.817 回答
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

于 2017-11-20T13:06:31.723 回答