ion.rangeSlider test playground

by Ilya

HTML

<script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script>
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css">
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.skinFlat.css">
<div class="range-slider">
  <input type="text" class="js-range-slider-money" value="" />
</div>
<div class="range-slider">
  <input type="text" class="js-range-slider-day" value="" />
</div>
<div class="extra-controls">
  Placeholder for some buttons to change slider behavior
  <div id="result_money"></div>
  <div id="result_day"></div>
</div>

CSS

body {
  margin: 40px 15px;
  font-family: Arial, sans-serif;
  font-size: 12px;
}

.range-slider {
  position: relative;
  height: 80px;
}

.extra-controls {
  position: relative;
  border-top: 3px solid #000;
  padding: 10px 0 0;
}

JavaScript

var $rangeMoney = $(".js-range-slider-money");
var $rangeDay = $(".js-range-slider-day");

var periodMap = [3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,8,10,12,14,16,18,20,22,24];
var $resultMoney = $("#result_money");
var $resultDay = $("#result_day");


var upMoney = function(data) {
  if (data.from >= 21000) {
    $rangeDataDay.update({
      values: periodMap,
      from: periodMap[16],
    })
  } else {
  	if ($rangeDataDay.result.from_value <= 21) {
     $rangeDataDay.update({
      from: periodMap[15],
    })
    }
    
  }
}
var upDay = function(data) {
  if (data.from >= periodMap[16]) {
    $rangeDataMoney.update({
       from: 21000,
    })
  } else {
    $rangeDataMoney.update({
      from: 20000,
    })
  }
}

$rangeMoney.ionRangeSlider({
  type: "single",
  min: 3000,
  max: 100000,
  step: 1000,
  from: 5000,
  onChange: upMoney,
});

$rangeDay.ionRangeSlider({
  type: "single",
  values: periodMap,
  onChange: upDay,

});

$rangeDataDay = $rangeDay.data("ionRangeSlider");

$rangeDataMoney = $rangeMoney.data("ionRangeSlider");