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> |
Огромное спасибо!
|
Часовой пояс GMT +3, время: 07:49. |