Javascript-форум - Ion.RangeSlider и разбивка по разрядам

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Ion.RangeSlider и разбивка по разрядам (https://javascript.ru/forum/jquery/63887-ion-rangeslider-i-razbivka-po-razryadam.html)

Ion.RangeSlider и разбивка по разрядам

Добрый день. Есть проблема небольшая.
Есть слайдер с диапазонами цен Ion.RangeSlider. Я его подружил с инпутами (на сайте слева).
Но не пойму, как разбивать на разряды числа. Есть какие-нибудь идеи?
Дружил я вот таким образом

var $range = $(".sidebar-range-slider-js"),
        $from = $(".js-from"),
        $to = $(".js-to"),
        range, min = 100,
        max = 10000,
        grid_margin = 0,
        from, to;

    var updateValues = function () {
        $from.prop("value", from);
        $to.prop("value", to);
    };

    $range.ionRangeSlider({
        type: "double",
        min: min,
        max: max,
        prettify_enabled: false,
        onChange: function (data) {
            from = data.from;
            to = data.to;

            updateValues();
        }
    });

    range = $range.data("ionRangeSlider");

    var updateRange = function () {
        range.update({
            from: from,
            to: to
        });
    };

    $from.on("change", function () {
        from = +$(this).prop("value");
        if (from < min) {
            from = min;
        }
        if (from > to) {
            from = to;
        }

        updateValues();
        updateRange();

    });

    $to.on("change", function () {
        to = +$(this).prop("value");
        if (to > max) {
            to = max;
        }
        if (to < from) {
            to = from;
        }
        updateValues();
        updateRange();

    });

Alexbelkevich,
какая проблема добавить разбивку в updateValues , а прежний вариант в фокус инпутов.

как разбить число -- на форуме десятки примеров.
и вместо prop в вашем случае более уместно val() или this.value

function number_format( str ){
      return (str.replace(/(\s)+/g, '').replace(/(\d{1,3})(?=(?:\d{3})+$)/g, '$1 '));
    }
    $('.sidebar-range-slider-controls .inp').keyup(function(event){
      $(this).val( number_format ( $(this).val() ) );
    });

Я вот так делал. Но тут при наборе с клавы работает. Соответственно не пойму как переписать так как надо

рони,
по поводу prop - автор сам посоветовал использовать именно его... Вот и сделал так...)

Ion.RangeSlider разбивка по разрядам и установка из input

Alexbelkevich,

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Ion.RangeSlider - test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.skinFlat.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/js/ion.rangeSlider.js"></script>
    <style type="text/css">
    .sidebar-range-slider {
      width: 500px;
    }
   </style>
   <script>
$(function() {
    var $range = $(".sidebar-range-slider-js"),
        $from = $(".js-from"),
        $to = $(".js-to"),
        min = 100,
        max = 1E4;
    $range.ionRangeSlider({
        type: "double",
        min: min,
        max: max,
        prettify_enabled: true,
        onChange: function(data) {
            updateValues()
        }
    });

    function number_format(num, format) {
        num = (num + "").replace(/(\s)+/g, "");
        return format ? num.replace(/(\d{1,3})(?=(?:\d{3})+$)/g, "$1 ") : num
    }
    $range = $range.data("ionRangeSlider");
    var updateValues = function() {
        var res = $range.result;
        $from.val(number_format(res.from, true));
        $to.val(number_format(res.to,true))
    };
    $from.on("focus", function() {
        this.value = number_format(this.value);
        this.focus();
        this.selectionStart = this.value.length
    }).on("input", function() {
        $range.update({
            from: this.value
        })
    }).on("blur", updateValues);
    $to.on("focus", function() {
        this.value = number_format(this.value);
        this.focus();
        this.selectionStart = this.value.length
    }).on("input", function() {
        $range.update({
            to: this.value
        })
    }).on("blur", updateValues)
});
</script>
</head>
<body>




 <div class="sidebar-element">
        <span class="sidebar-element-title">Цена</span>
        <div class="sidebar-range-slider">
            <input type="text" class="sidebar-range-slider-js" value="" />
        </div>
        <div class="sidebar-range-slider-controls">
          <input type="text" maxlength="4" value="100" class="inp js-from" />
          <span>-</span>
          <input type="text" maxlength="5" value="10 000" class="inp js-to" />
        </div>
 </div>


</body>
</html>

Огромное спасибо!