Trying to make an input field for range slider jquery ui with a space:

$('.slider-element').each(function() { var $this = $(this), container = $this.closest('.slider'), min = parseInt($this.data('min')), max = parseInt($this.data('max')), from = container.find('.from'), to = container.find('.to'); console.log(parseInt(from.val())); from.change(function() { var value1 = from.val(), value2 = to.val(); if(parseInt(value1) > parseInt(value2)){ value1 = value2; from.val(value1); } $this.slider('values', 0, from.val()).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1 "); console.log(); }); to.change(function() { var value1 = from.val(), value2 = to.val(); if(parseInt(value1) > parseInt(value2)){ value2 = value1; to.val(value2); } $this.slider('values', 1, to.val()); }); $this.slider({ range: true, min: min, max: max, step: 83, values: [min, max], slide: function(event, ui) { // ΠŸΡ€ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ var values = $(this).slider('option', 'values'); from.val(ui.values[0]); to.val(ui.values[1]); }, change: function(event, ui) { // Π’ ΠΊΠΎΠ½Ρ†Π΅ пСрСтаскивания console.log('change'); }, create: function() { // ΠŸΡ€ΠΈ создании Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π° var values = $(this).slider('option', 'values'); from.val(values[0]); to.val(values[1]); }, stop: function(event, ui) { // ΠŸΡ€ΠΈ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠΈ пСрСтаскивания } }); }); 
 <div class="slider"> <div class="slider-display"> <input type="text" name="slider" class="input from" > <input type="text" name="slider" class="input to"> </div> <div class="slider-element" data-min="0" data-max="1000"></div> </div> <script src="https://code.jquery.com/jquery-2.0.3.js"></script> <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

I use .replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1 ") , but apparently not correctly.

I do not understand what is wrong in the code, how to implement this input format 12 345 :

enter image description here

    1 answer 1

    Decided so:

     $('.slider-element').each(function() { var $this = $(this), container = $this.closest('.slider'), min = parseInt($this.data('min')), max = parseInt($this.data('max')), from = container.find('.from'), to = container.find('.to'); from.change(function() { var value1 = from.val(), value2 = to.val(), value1new = value1.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1 "), value2new = value1.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1 "); if(parseInt(value1) > parseInt(value2)){ value1 = value2; from.val(value1); } $this.slider('values', 0, from.val(value1new)); console.log(); }); to.change(function() { var value1 = from.val(), value2 = to.val(); if(parseInt(value1) > parseInt(value2)){ value2 = value1; to.val(value2); } $this.slider('values', 1, to.val()); }); $this.slider({ range: true, min: min, max: max, step: 83, values: [min, max], slide: function(event, ui) { // ΠŸΡ€ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ var values = $(this).slider('option', 'values'); from.val(ui.values[0].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1 ")); to.val(ui.values[1].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1 ")); }, change: function(event, ui) { // Π’ ΠΊΠΎΠ½Ρ†Π΅ пСрСтаскивания console.log('change'); }, create: function() { // ΠŸΡ€ΠΈ создании Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π° var values = $(this).slider('option', 'values'); from.val(values[0].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1 ")); to.val(values[1].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1 ")); }, stop: function(event, ui) { // ΠŸΡ€ΠΈ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠΈ пСрСтаскивания } }); }); 
     <div class="slider"> <div class="slider-display"> <input type="text" name="slider" class="input from" > <input type="text" name="slider" class="input to"> </div> <div class="slider-element" data-min="0" data-max="1000"></div> </div> <script src="https://code.jquery.com/jquery-2.0.3.js"></script> <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>