ion.rangeSlider test playground

Reverse

by Denis Ineshin

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.skinHTML5.css">
<div class="range-slider">
  <input type="text" class="js-range-slider" value="" />
</div>
<div class="extra-controls">
  Placeholder for some buttons to change slider behavior
</div>

CSS

html {
  height: 100%;
}

body {
  height: 100%;
  overflow: hidden;
  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 $range = $(".js-range-slider"),
  min = -30,
  max = 70;

$range.ionRangeSlider({
  type: "single",
  min: min,
  max: max,
  from: 30,
  prettify: function(num) {
    var tmp_min = min,
      tmp_max = max,
      tmp_num = num;

    if (min < 0) {
      tmp_min = 0;
      tmp_max = max - min;
      tmp_num = num - min;
      tmp_num = tmp_max - tmp_num;
      return tmp_num + min;
    } else {
      num = max - num;
      return num;
    }
  }
});