Отслеживание value в input

260
19 сентября 2017, 09:35

$("#range_1").ionRangeSlider({ 
  type: "double", 
  min: 0, 
  max: 100, 
  from: 20, 
  to: 80 
}); 
 
$("#range_1").on("change", function() { 
  var $this = $(this), 
    value = $this.prop("value").split(";"); 
  $("#range1").val(value[0]); 
  $("#range2").val(value[1]); 
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.css" rel="stylesheet" /> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinHTML5.css" rel="stylesheet" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/js/ion.rangeSlider.js"></script> 
<div class="input-group_"> 
  <input type="text" id="range1" class="range-form"> 
</div> 
<div class="input-group_"> 
  <input type="text" id="range2" class="range-form"> 
</div> 
<input type="text" id="range_1" name="example_name" value="" />

Как отслеживать value в input, например я пишу значение 30 - 40, и на слайдере выставляются точно такие же параметры (автоматически).

Использую библиотеку: http://ionden.com/a/plugins/ion.rangeslider/

Answer 1

По сути нагуглил решение тут :

$("#range_1").ionRangeSlider({ 
  type: "double", 
  min: 0, 
  max: 100, 
  from: 20, 
  to: 80 
}); 
 
$("#range_1").on("change", function() { 
  var $this = $(this), 
    value = $this.prop("value").split(";"); 
  $("#range1").val(value[0]); 
  $("#range2").val(value[1]); 
}); 
 
$('#range1, #range2').on('change', function(e) { 
  var s = $("#range_1").data("ionRangeSlider"); 
  var id = $(this).attr('id'); 
  var val; 
  if (id == 'range1') { 
    val = $("#range1").val(); 
    s.update({ 
      from: val 
    }); 
  } else { 
    val = $("#range2").val(); 
    s.update({ 
      to: val 
    }); 
  } 
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.css" rel="stylesheet" /> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinHTML5.css" rel="stylesheet" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/js/ion.rangeSlider.js"></script> 
<div class="input-group_"> 
  <input type="text" id="range1" class="range-form"> 
</div> 
<div class="input-group_"> 
  <input type="text" id="range2" class="range-form"> 
</div> 
<input type="text" id="range_1" name="example_name" value="" />

Answer 2

Пользуйте сохранение слайдера в переменную и дальнейшее взаимодействие с ним (код отсюда):

$("#range_1").ionRangeSlider({ 
  type: "double", 
  min: 0, 
  max: 100, 
  from: 20, 
  to: 80 
}); 
 
$("#range_1").on("change", function() { 
  var $this = $(this), 
    value = $this.prop("value").split(";"); 
  $("#range1").val(value[0]); 
  $("#range2").val(value[1]); 
}); 
 
var rSlider = $("#range_1").data("ionRangeSlider"); 
$('#range1,#range2').on('change', function() { 
  rSlider.update({ 
    from: +$("#range1").val(), 
    to: +$("#range2").val() 
  }); 
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.css" rel="stylesheet" /> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinHTML5.css" rel="stylesheet" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/js/ion.rangeSlider.js"></script> 
<div class="input-group_"> 
  <input type="text" id="range1" class="range-form"> 
</div> 
<div class="input-group_"> 
  <input type="text" id="range2" class="range-form"> 
</div> 
<input type="text" id="range_1" name="example_name" value="" />

READ ALSO
Google map api, как закрасить регион или область?

Google map api, как закрасить регион или область?

Подскажите,предусмотрено ли в google maps api возможность закраски каким-то своим цветом региона(области), скажем я хочу отметить регионы в которых...

223
PHP отправка писем на @mail

PHP отправка писем на @mail

Столкнулся с проблемой отправки писемПочитал разные статейки, в основном у людей проблема самой отправки и что-то в этом деле

166
Php вызов функции

Php вызов функции

Имеется кодОшибка в вызове функции

193