Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.07.2016, 13:30
Аспирант
Отправить личное сообщение для Alexbelkevich Посмотреть профиль Найти все сообщения от Alexbelkevich
 
Регистрация: 02.10.2014
Сообщений: 52

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();

    });
Ответить с цитированием
  #2 (permalink)  
Старый 06.07.2016, 13:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

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

как разбить число -- на форуме десятки примеров.
и вместо prop в вашем случае более уместно val() или this.value
Ответить с цитированием
  #3 (permalink)  
Старый 06.07.2016, 13:49
Аспирант
Отправить личное сообщение для Alexbelkevich Посмотреть профиль Найти все сообщения от Alexbelkevich
 
Регистрация: 02.10.2014
Сообщений: 52

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


Я вот так делал. Но тут при наборе с клавы работает. Соответственно не пойму как переписать так как надо
Ответить с цитированием
  #4 (permalink)  
Старый 06.07.2016, 13:56
Аспирант
Отправить личное сообщение для Alexbelkevich Посмотреть профиль Найти все сообщения от Alexbelkevich
 
Регистрация: 02.10.2014
Сообщений: 52

рони,
по поводу prop - автор сам посоветовал использовать именно его... Вот и сделал так...)
Ответить с цитированием
  #5 (permalink)  
Старый 06.07.2016, 14:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

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>

Последний раз редактировалось рони, 06.07.2016 в 15:23.
Ответить с цитированием
  #6 (permalink)  
Старый 06.07.2016, 15:20
Аспирант
Отправить личное сообщение для Alexbelkevich Посмотреть профиль Найти все сообщения от Alexbelkevich
 
Регистрация: 02.10.2014
Сообщений: 52

Огромное спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Разделение числа по разрядам steepfox Элементы интерфейса 10 22.09.2015 18:29
Разделить числа по разрядам junker Общие вопросы Javascript 3 15.04.2012 22:54