noUiSlider 8.2.1 base

by Jawad Ameen

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.0.0/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.0.0/nouislider.min.js"></script>

<div id=container>
  <div id=slider></div>
</div>

CSS

#container {
  padding: 20px;
  margin-top: 50px;
}

.noUi-connect { box-shadow: none; text-align: center; }
.c-1-color { background: #F77975; }
.c-2-color { background: #D8DADC; }
.c-3-color { background: #0A7C71; }
.c-4-color { background: blue; }
.c-5-color { background: purple; }

JavaScript

var slider = document.getElementById('slider');
noUiSlider.create(slider, {
	start: [20, 80],
	range: { min: 0, max: 100 },
  step: 1,
  connect: [true, true, true],
//  tooltips: wNumb({ decimals: 1 }),
/*pips: {
		mode: 'count',
		values: 11,
		density:5,
		stepped: true
	},*/
tooltips: false,
format: {
	  to: function ( value ) {
		return value;//Math.round(value);
	  },
	  from: function ( value ) {
		return value;
	  }
	}
});

slider.noUiSlider.on('update', function() {
  //console.log(this.get());
  var values = this.get();
  /*$(this.target).find('.noUi-connect').each(function(){                 $(this).text(Math.round(Math.random()*10));
  });*/
  var test = $(this.target).find('.noUi-connect');
  $(test[0]).text(values[0]); 
  $(test[1]).text(values[1]-values[0]);
  $(test[2]).text(100-values[1]);  
});
//console.log(slider.noUiSlider.get());

slider.noUiSlider.on('change', function(){
	console.log(this.get());
  console.log(this.target);
  console.log($(this.target).find('.noUi-connect'));
  
});

var connect = slider.querySelectorAll('.noUi-connect');
var classes = ['c-1-color', 'c-2-color', 'c-3-color', 'c-4-color', 'c-5-color'];

for ( var i = 0; i < connect.length; i++ ) {
    connect[i].classList.add(classes[i]);
}