将新值设置为 bootstrap 滑块

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, ',');
            }
            if (str[1] && str[1].length >= 5) {
                str[1] = str[1].replace(/(\d{3})/g, ' ');
            }
            return str.join('.');
        }

我收到的错误：

Uncaught TypeError: Cannot read property 'toFixed' of undefined

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, ',');
        }
        if (str[1] && str[1].length >= 5) {
            str[1] = str[1].replace(/(\d{3})/g, ' ');
        }
        return str.join('.');
    }

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

将新值设置为 bootstrap 滑块

Setting new values to bootstrap slider bar

javascript

jquery

bootstrap-slider