Put percentages in two ion range sliders

Navigation
0

I am using this library: Ion Range Slider

I'm trying to bin two sliders, and they move to a certain percentage when one of them is manipulated.

I give an example 

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

What I need is, when the bar with id "bar" moves, put "foo" in the opposite direction, for example, if "bar" was at 75% "foo" it should be set to 25%. I have not got it.

Welcome suggestions

    
asked by Alberto Siurob 10.04.2018 в 21:07
source

1 answer

1

You practically had it, only you needed to change the from_percent by from in the update of slider and in the subtraction of percentages: 

$(function(){

  $(".slider").ionRangeSlider({
type: "single",
grid: true,
min: 1,
max: 100,
from: 50,
keyboard: true,
onChange: function(data) {
  var percent = 100 - Math.floor(data.from);
  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">
    
answered by 10.04.2018 в 21:54
React Native App: proccesReleaseResources failed How to load a background image in a Java Canvas