Flat UI Panel

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;
}
.ui-slider {
    margin: 50px 50px 80px;
}

JavaScript

String.prototype.repeat = function (num) {
  return new Array(num + 1).join(this);
};

(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;
      if ( 'vertical' === orientation ) {
        var output = '', i;
        for (i = 1; i <= amount - 2; i++) {
            output += '<div class="ui-slider-segment" style="top:' + 100 / (amount - 1) * i + '%;"></div>';
        }
        $this.prepend(output);
      } else {
        var segmentGap = 100 / (amount) + '%';
        var segment = '<div class="ui-slider-segment" style="margin-left: ' + segmentGap + ';"></div>';
        $this.prepend(segment.repeat(amount - 1));
      }
    });
  };

  $.fn.addSliderSegmentsSecond = function () {
    return this.each(function () {
      var $this = $(this),
          option = $this.slider('option'),
          amount = option.max/option.step,
          orientation = option.orientation;
      if ( 'vertical' === orientation ) {
        var output = '', i;
        for (i = 1; i <= amount - 2; i++) {
            output += '<div class="ui-slider-segment" style="top:' + 100 / (amount - 1) * i + '%;"></div>';
        }
        $this.prepend(output);
      } else {
        var segmentGap = 100 / (amount) + '%';
        var segment = '<div class="ui-slider-segment" style="margin-left: ' + segmentGap + ';"></div>';
        $this.prepend(segment.repeat(amount - 1));
      }
    });
  };

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


})(jQuery);