noUI SLider

noUI SLider

by firegroove

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.css">
<div id="content">
  <div id="slider"></div>
</div>

CSS

#content {
  margin: 100px;
}
#slider{
  //height:500px;
}
#slider > .noUi-base {
  background: #c0392b;  
}
#slider  {
  background: #50ab2b;  
}
#slider  {
  background: #80392d;  
}

JavaScript

var slider=document.getElementById('slider');
noUiSlider.create(slider, {
  start: [20,40], //num, [num], [num,num]
  range: {
    'min': [0],
    'max': [100]
  },
  behaviour: 'drag-tap',
  connect: true,
  //margin: 30,
  //limit: 40,
  step: 10,
  orientation: 'horizontal',
  animate: true,
	animationDuration: 300,
  tooltips:[true,true]
});
slider.noUiSlider.on('slide',function(values, handle, unencoded, tap, positions ){		
   var tempSlider=$(slider);
  tempSlider.find('.noUi-base').css('background','red');
  tempSlider.find('.noUi-base > .noUi-connect').css('background','green');
  tempSlider.find('.noUi-base .noUi-handle.noUi-handle-lower').css('background','green');
  tempSlider.find('.noUi-base .noUi-handle.noUi-handle-upper').css('background','pink');
  tempSlider.find('.noUi-base > .noUi-connect').css('background','green');
  tempSlider.find('.noUi-base > .noUi-background').css('background','blue');
})
//slider.noUiSlider.destroy()