Flat UI Panel

by ifinto

HTML

<link rel="stylesheet" href="http://designmodo.github.io/Flat-UI/dist/css/vendor/bootstrap.min.css">
<link rel="stylesheet" href="http://designmodo.github.io/Flat-UI/dist/css/flat-ui.css">
<script src="http://designmodo.github.io/Flat-UI/dist/js/vendor/jquery.min.js"></script>
<script src="http://designmodo.github.io/Flat-UI/dist/js/flat-ui.min.js"></script>
<div id="sliderFirst"></div>

<div id="sliderSecond"></div>

CSS

body {
    padding: 50px;
}

JavaScript

(function ($) {
    
  $.fn.addSliderSegmentsFirst = function () {
      
      return this.each(function () {
        var $this = $(this),
            option = $this.slider('option'),
            amount = (option.max - option.min)/option.step,
            orientation = option.orientation;

          var segmentGap = 100 / (amount) + '%';
          var segment = '<div class="ui-slider-segment" style="margin-left: ' + segmentGap + ';"></div>';
          console.log($this);
          $this.prepend(segment.repeat(amount - 1));
        
      });
    };


                
    $('#sliderFirst').slider({
        max: 10
    }).addSliderSegmentsFirst();
    
//    $('#sliderSecond').slider({
//        max: 10
//    }).addSliderSegmentsSecond();


})(jQuery);