ion.rangeSlider test playground

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" id="Strategy" value="" />
</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;
}
.result {
  padding: 10px 0 0;
  font-size: 20px;
}

JavaScript

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

$('#Strategy').ionRangeSlider({
  type: 'single',
  grid: true,
  values: maintenanceStrategyItems,
  onFinish: function (data) {
    console.log(maintenanceStrategyItems[0], data.from_value);
  }
});