Untitled

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script  src="js/jquery1.js" type="text/javascript"></script>
    <script src="js/custom.js"></script>
</head>
<body>
      <div id="sidebar">
           <ul>
             <li id="ft-bar"><h3><a><span class="icon-signal"></span>Freshtime Context Bar</a></h3></li>
           </ul>
      </div>
      <div id="maincontent">
      </div>
   <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
   <script type="text/javascript">
   </script>
</body>
</html>

$(document).ready(function(){
            $('#ft-bar').click(function(){
               $('#maincontent').load('ftp-bar.html');
         })
    });

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Product Life range slider</title>
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <script  src="js/jquery1.js"></script>
  <script  src="js/colResizable-1.3.min.js"></script>
  <script type="text/javascript">
$(function(){

    //callback function
    var onSlide = function(e){
        var columns = $(e.currentTarget).find("td");
        var ranges = [], total = 0, i, s ="Ranges: ", w;
        for(i = 0; i<columns.length; i++){
            w = columns.eq(i).width()-10 - (i==0?1:0);
            ranges.push(w);
            total+=w;
        }
        for(i=0; i<columns.length; i++){
            ranges[i] = 100*ranges[i]/total;
            carriage = ranges[i]-w
            s+=" "+ Math.round(ranges[i]) + "%,";
        }
        s=s.slice(0,-1);
        $("#text").html(s);
    }

    //colResize the table
   $("#product-life-slider").colResizable({
        liveDrag:true,
        draggingClass:"",
        onResize:onSlide,
        gripInnerHtml:"<div class='box1'>Grower <br> 2 Days</div>   <div class='label1'></div>",
        minWidth:8
        });

});
  </script>

 </head>
 <body>
<div class="containerftp">

        <table width="80%" border="0" cellspacing="5" cellpadding="0">
      <tr>
        <td width="20%"><input type="text" class="ftp" name="Days to Useby" placeholder="Days to Useby" value=""></td>
        <td width="20%"><input type="text" class="ftp" name="Storage Temp" placeholder="Storage Temp" value=""></td>
        <td width="20%"><input type="text" class="ftp" name="Storage Time" placeholder="Storage Time" value=""></td>
        <td width="20%"><input type="range" class="ftp" value="30" min="0" max="100"/></td>
        <td width="20%"><input type="text" class="ftp" name="Average Temperature" placeholder="Average Temp" value=""></td>
      </tr>
    </table>

    <br/><br/><br/><br/><br/><br/>

    <table id="product-life-slider" width="80%" cellspacing="0" cellpadding="0" border="0" padding-left="2%">
        <tr>
            <td class="partner" width="2%"></td>
            <td class="partner" width="24%"></td>
            <td class="partner" width="6%"></td>
            <td class="partner" width="27%"></td>
            <td class="consumer" width="14%"></td>
            <td class="useby" width="27%"></td>
        </tr>
    </table>

</div>

.containerftp{margin:5% auto;text-align:left; position:relative;}

input[type=range].ftp:first-of-type {width: 120px;}
input.ftp {padding:10px;width:85%;border:1px solid #c5dbef;border-radius:5px; background:#e0effc;font-size:14px;}
input.ftp ::-webkit-input-placeholder {color: rgba(0,5,143,.5);text-transform: uppercase;}
input.ftp ::-moz-placeholder {color: rgba(0,5,143,.5);text-transform: uppercase;}
input.ftp :-moz-placeholder {color: rgba(0,5,143,.5);text-transform: uppercase;}  /* Older versions of Firefox */
input.ftp :-ms-input-placeholder { color: rgba(0,5,143,.5);text-transform: uppercase;}

#product-life-slider {border:1px solid #A6C9E2; border-radius:5px;}
#product-life-slider td{height:100px;border:none;}


.partner{background: rgba(154,255,87,1);
background: -moz-linear-gradient(top, rgba(154,255,87,1) 0%, rgba(68,201,59,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(154,255,87,1)), color-stop(100%, rgba(68,201,59,1)));
background: -webkit-linear-gradient(top, rgba(154,255,87,1) 0%, rgba(68,201,59,1) 100%);
background: -o-linear-gradient(top, rgba(154,255,87,1) 0%, rgba(68,201,59,1) 100%);
background: -ms-linear-gradient(top, rgba(154,255,87,1) 0%, rgba(68,201,59,1) 100%);
background: linear-gradient(to bottom, rgba(154,255,87,1) 0%, rgba(68,201,59,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9aff57', endColorstr='#44c93b', GradientType=0 );
border-right: 1px solid #000 !important;}

/* consumer */
.consumer{background: rgba(255,238,87,1);
background: -moz-linear-gradient(top, rgba(255,238,87,1) 0%, rgba(255,176,66,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,238,87,1)), color-stop(100%, rgba(255,176,66,1)));
background: -webkit-linear-gradient(top, rgba(255,238,87,1) 0%, rgba(255,176,66,1) 100%);
background: -o-linear-gradient(top, rgba(255,238,87,1) 0%, rgba(255,176,66,1) 100%);
background: -ms-linear-gradient(top, rgba(255,238,87,1) 0%, rgba(255,176,66,1) 100%);
background: linear-gradient(to bottom, rgba(255,238,87,1) 0%, rgba(255,176,66,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffee57', endColorstr='#ffb042', GradientType=0 );
border-right: 1px solid #000 !important;}

 /* UseBy */
.useby{background: rgba(255,160,87,1);
background: -moz-linear-gradient(top, rgba(255,160,87,1) 0%, rgba(255,88,66,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,160,87,1)),    color-stop(100%, rgba(255,88,66,1)));
background: -webkit-linear-gradient(top, rgba(255,160,87,1) 0%, rgba(255,88,66,1) 100%);
background: -o-linear-gradient(top, rgba(255,160,87,1) 0%, rgba(255,88,66,1) 100%);
background: -ms-linear-gradient(top, rgba(255,160,87,1) 0%, rgba(255,88,66,1) 100%);
background: linear-gradient(to bottom, rgba(255,160,87,1) 0%, rgba(255,88,66,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa057', endColorstr='#ff5842', GradientType=0 );}

  /* column anchors */
div.box1{   position: absolute;
        margin-top:-55px;
         margin-left:-36.8px;
         width:70px;height:40px;
         background:#e0effc;
         border-radius:5px;
         border:1px solid #c5dbef;
         font-size:13px;
         padding:5px;
         text-align:center;
          }
 div.label1 {position: absolute;
        margin-left:-9px;
        width:0;height:0;
        border-left:13px solid transparent;
        border-right: 13px solid transparent;
        border-top: 13px solid #e0effc;
        cursor:e-resize;}