JSFiddle - React, Tailwind, and code Playground

by ronnjoe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<div id="alternating-slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all ui-slider-pips ui-slider-float">
</div>
<script id="entry-template" type="text/x-handlebars-template">
	<span class="ui-slider-pip ui-slider-pip-label" style="left: {{initialPercentage}}%"> 
		<span class="ui-slider-line"></span>
		<span class="ui-slider-label" data-value="{{initialDate}}">{{initialDate}}</span>
	</span>
  
   {{#each elements}}
	<span class="ui-slider-pip ui-slider-pip-label" style="left: {{countPercentage}}%"> 
		<span class="ui-slider-line"></span>
		<span class="ui-slider-label" data-value="{{count}}"><a href="#" class="countData">{{count}}</a></span>
	</span>
  <span class="ui-slider-pip ui-slider-pip-label" style="left: {{endPercentage}}%"> 
		<span class="ui-slider-line"></span>
		<span class="ui-slider-label" data-value="{{endDate}}">{{endDate}}</span>
	</span>
  {{/each}}
</script>

<div class=
    "ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all ui-slider-pips ui-slider-float"
    id="alternating-slider">
	<span class=
        "ui-slider-pip ui-slider-pip-label "
        style="left: 0%">
		<span class="ui-slider-line"></span>
		<span class=
        "ui-slider-label" data-value="0">Min</span>
	</span>
	<span class=
        "ui-slider-pip ui-slider-pip-label" style=
        "left: 2.5000%">
		<span class="ui-slider-line"></span>
		<span class=
        "ui-slider-label" data-value="25">25</span>
	</span>
	<span class=
        "ui-slider-pip ui-slider-pip-label ui-slider-pip-50" style=
        "left: 5.0000%">
		<span class="ui-slider-line"></span>
		<span class=
        "ui-slider-label" data-value="50">50</span>
	</span>
	<span class=
        "ui-slider-pip ui-slider-pip-label ui-slider-pip-75" style=
        "left: 7.5000%">
		<span class="ui-slider-line"></span>
		<span class=
        "ui-slider-label"...

CSS

.ui-slider.ui-slider-horizontal {
    margin: 50px 10px 10px;
}
/*
.ui-slider-pips [class*="ui-slider-pip-initial"] {
    color: #14ca82;
    font-weight: 700;
}*/
.ui-slider-pips .ui-slider-pip {
    -moz-user-select: none;
    color: #999;
    font-size: 0.8em;
    height: 1em;
    left: 20px;
    line-height: 1em;
    margin-left: -1em;
    overflow: visible;
    position: absolute;
    text-align: center;
    top: 20px;
    width: 2em;
}

#alternating-slider .ui-slider-pip:nth-child(2n) {
    height: 15px;
    opacity: 0.8;
    top: -3px;
    transform: scale(0.8) translateY(3px);
}
.ui-slider-pips .ui-slider-pip {
    -moz-user-select: none;
    color: #999;
    font-size: 0.8em;
    height: 1em;
    left: 20px;
    line-height: 1em;
    margin-left: -1em;
    overflow: visible;
    position: absolute;
    text-align: center;
    top: 20px;
    width: 2em;
}
#alternating-slider .ui-slider-pip .ui-slider-line {
    height: 8px;
    top: -5px;
}

.ui-slider-pips .ui-slider-line {
    background: #999 none repeat scroll 0 0;
    height: 3px;
    left: 50%;
    position: absolute;
    width: 1px;
}

#alternating-slider .ui-slider-pip:nth-child(2n) .ui-slider-line {
    height: 9px;
    top: 22px;
}

JavaScript

// Slider with date Function
var data = { 
	"ret": {  
		"aaData": {   
			"overdueCountDistribution": [    {     
				"timeWindow": {      
					"valid": true,
					      "notValid": false,
					      "startTime": 1469294460000,
					      "endTime": 1469377260000     
				},
				     "index": 2,
				     "overdueCount": {      
					"P": 0,
					      "C": 0     
				}    
			},      {     
				"timeWindow": {      
					"valid": true,
					      "notValid": false,
					      "startTime": 1469208060000,
					      "endTime": 1469294460000     
				},
				     "index": 1,
				     "overdueCount": {      
					"P": 578,
					      "C": 2     
				}    
			},      {     
				"timeWindow": {      
					"valid": true,
					      "notValid": false,
					      "startTime": 1469121660000,
					      "endTime": 1469208060000     
				},
				     "index": 0,
				     "overdueCount": {      
					"P": 243,
					      "C": 0     
				}    
			}   ]  
		} 
	},
	 "ok": true,
	 "message": ""
}
var source   = $("#entry-template").html();
var template = Handlebars.compile(source);
var finalData = {};
finalData.elements = [];
var fullLength = (data.ret.aaData.overdueCountDistribution.length)*3;
fullLength =fullLength-3;
var originalIndividualPercentage = (1/fullLength)*(100);
console.log(originalIndividualPercentage);
var dummyData = [];
$.each(data.ret.aaData.overdueCountDistribution,function(i,e){	
	var tempData = {};
  var currentIndex = e.index;
  if(e.index ==0){
  	finalData.initialPercentage = 0;
    finalData.initialDate = e.timeWindow.startTime;
  }
  if(e.index ==0){
  	var currentMultiply = originalIndividualPercentage;
  } else {
  	var currentMultiply = originalIndividualPercentage * ((currentIndex*2 )+1);
  }
  tempData.startDate = e.timeWindow.startTime;
  tempData.endDate = e.timeWindow.endTime;
  tempData.count = e.overdueCount.P;
  tempData.countPercentage = currentMultiply ;
  tempData.endPercentage = originalIndividualPercentage + currentMultiply;
 ...