Setting new values to bootstrap slider bar

I'm struggling with setting new values to my bootstrap-slider bar. I want to create the Two-way bind with my textboxes and the slider bar, so if my slider or text value is changed textbox value changes and opposite. i got the first part right and if the slider value changes so will my textboxes, however if i want to send a new value from my textboxes to slider it'll be tricky and it doesn't work.

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

And The Error i am receiving:

Uncaught TypeError: Cannot read property 'toFixed' of undefined

To Achieve this I needed to verify the max and min value and include within setValue like below:

    $(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;
    }