ionRangeSlider set values based on percentage

Question

I´m using this library: ionRangeSlider

I´m trying to bind 2 sliders based on their current percentage, this is my code:

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

For example, if FOO moves to it´s 25 percent, BAR must be moved to 75 percent and viceversa. The values on both sliders are different, they will be build dynamically from the back end.

What is wrong on this code?

score 0 · Answer 1 · answered Apr 12 '18 at 14:15

look at this demo:

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");

ionRangeSlider set values based on percentage

1 Answers1