How to get from and to values in IonRangeSlider when type is 'single'

2.5k Views Asked by At

I am using IonRangeSlider in which I have 3 custom values :

["Value1","Value2","Value3"] 

And the type is single.

Now what I want is , I want to detect the from and to values in a way If I switch from Value1 to Value2 then I want both of them values in 2 different variables as I have some calculations based on from and to values. But what I am able to do is just can get the From value like Value1.

Below is my code.

$('#Strategy').ionRangeSlider({
      type: 'single',
      grid: true,
      values: ["Value1","Value2","Value3"],
      onFinish: function (obj) {                
          alert(obj.from_value);
      }
});
1

There are 1 best solutions below

3
On BEST ANSWER

Working fiddle.

In the single case the to is always null if you look inside the response parameter of onFinish callback, but also the first item of the passed array will be always the to so you could just get the both from/to like :

var maintenanceStrategyItems = ["Preventive","Optimal","Corrective"];
var old_value=maintenanceStrategyItems[0];

$('#Strategy').ionRangeSlider({
  type: 'single',
  grid: true,
  values: maintenanceStrategyItems,
  onChange: function (data) {
    console.log(old_value, data.from_value);
    old_value=data.from_value;
  }
});

Hope this helps.

var maintenanceStrategyItems = ["Preventive","Optimal","Corrective"];
var old_value=maintenanceStrategyItems[0];

$('#Strategy').ionRangeSlider({
  type: 'single',
  grid: true,
  values: maintenanceStrategyItems,
  onChange: function (data) {
    console.log(old_value, data.from_value);
    old_value=data.from_value;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.skinFlat.css" rel="stylesheet"/>
<link href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css" rel="stylesheet"/>
<script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script>
<input type="text" id="Strategy" value="" />