ion.rangeSlider test playground

by Alex Chizhov

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" value="">
</div>

CSS

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

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


/* Облачка над слайдером */

.irs-single,
.irs-max,
.irs-min,
.irs-from,
.irs-to {
  display: none;
}

.irs-line {
  height: 2px;
  top: 30px;
}

.irs-line-left,
.irs-line-mid,
.irs-line-right {
  height: 2px;
}

.irs-grid-pol {
  background: #fff;
  height: 19px;
  top: -18px;
  width: 2px;
  z-index: 2;
}

.irs-grid-pol.small {
  display: none;
}

.irs-slider.single {
  background: #fff;
  border: 2px solid #2b9f52;
  box-sizing: border-box;
  height: 15px;
  width: 15px;
  top: 24px;
  z-index: 4;
}

.irs-grid-text {
  font-size: 12px;
  color: #000;
}

.irs-bar {
  background: #2b9f52;
  height: 4px;
  top: 29px;
  z-index: 3;
}

.irs-bar-edge {
  background: #2b9f52;
  height: 4px;
  top: 29px;
  width: 9px;
  left: 6px;
}

.irs-bar,
.irs-bar-edge {
  background: #2b9f52;
}

.irs-line-left,
.irs-line-mid,
.irs-line-right {
  background: #fff;
}

.irs-line-right {
  right: 9px;
  width: 9%;
}

.irs-line-left {
  left: 6px;
}

JavaScript

var $range = $(".js-range-slider");

$range.ionRangeSlider({
  type: "single",
  values: ['Эконом', 'Комфорт', 'Бизнес'],
  grid: true
});