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>