ionRangeSlider устанавливает значения в процентах

Я использую эту библиотеку: ionRangeSlider

Я пытаюсь связать 2 ползунка на основе их текущего процента, это мой код:

$(function(){

  $("#foo").ionRangeSlider({
    type: "single",
    grid: true,
    min: 1,
    max: 200,
    from: 50,
    keyboard: true,
    onFinish: function(data) {
      var percent = 100 - Math.floor(data.from_percent);

      if( data.input[0].id === 'foo' ){
        priceSlider.update({
          from: percent
        });
      }

      else{
        timeSlider.update({
          from: percent
        });
      }
    },
  });
  
    $("#bar").ionRangeSlider({
    type: "single",
    grid: true,
    min: 500,
    max: 1000,
    from: 50,
    keyboard: true,
    onFinish: function(data) {
      var percent = 100 - Math.floor(data.from_percent);

      if( data.input[0].id === 'foo' ){
        priceSlider.update({
          from: percent
        });
      }

      else{
        timeSlider.update({
          from: percent
        });
      }
    },
  });
  
      var priceSlider = $('#bar').data("ionRangeSlider"),
      timeSlider = $('#foo').data("ionRangeSlider");
})
<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>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinHTML5.min.css">

<label>Price</label>
<input type="text" class="slider" id="bar">

<label>Time</label>
<input type="text" class="slider" id="foo">

Например, если FOO переходит на 25 процентов, BAR должен быть перемещен на 75 процентов и наоборот. Значения на обоих ползунках разные, они будут динамически создаваться из серверной части.

Что не так в этом коде?

1 ответ

Посмотрите на эту демонстрацию:

http://jsfiddle.net/xogxL7b1/

var $range1 = $(".js-range-slider-1");
var $range2 = $(".js-range-slider-2");
var range_instance_1;
var range_instance_2;
var min = 100;
var max = 1000;

$range1.ionRangeSlider({
    type: "single",
    min: min,
    max: max,
    from: 500,
    onChange: function (data) {
        range_instance_2.update({
            from: max - (data.from - min)
        });
    }
});
range_instance_1 = $range1.data("ionRangeSlider");

$range2.ionRangeSlider({
    type: "single",
    min: min,
    max: max,
    from: 600,
    onChange: function (data) {
        range_instance_1.update({
            from: max - (data.from - min)
        });
    }
});
range_instance_2 = $range2.data("ionRangeSlider");
Другие вопросы по тегам