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="">
<http://jsfiddle.net/alexchizhov/k88nL4Lt/1/#update/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
});