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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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