0

$("#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/

1
  • Посмотрите решение разработчиков слайдера ссылка
    – Igor Lut
    18 сен 2017 в 12:57

2 ответа 2

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="" />

0

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

$("#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="" />

2
  • как-то он стремновато работает, думаю надо убрать кейап с боди и сделать просто чейндж на инпутах :) 18 сен 2017 в 13:02
  • Можно и так....
    – br3t
    18 сен 2017 в 13:10

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.