JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://static.tumblr.com/sigl4kh/AKpm8f98x/bootstrap.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />


<div class="container">
            <div class="row">
                <div class="span12">
                    <div id="dgArea" class="dragArea">
                        <div id="dDragHandler" class="dateDragHandler"></div>
                    </div>            
                    <div class="dateTab" >
                        <ul>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li>7</li>
                            <li>8</li>
                            <li>9</li>
                            <li>10</li>
                            <li>11</li>
                            <li>12</li>
                            <li>13</li>
                            <li>14</li>
                            <li>15</li>
                            <li>16</li>
                            <li>17</li>
                            <li>18</li>
                            <li>19</li>
                            <li>20</li>
                            <li>21</li>
                            <li>22</li>
                            <li>23</li>
                            <li>24</li>
                            <li>25</li>
                            <li>26</li>
                            <li>27</li>
                            <li>28</li>
                            <li>29</li>
                            <li>30</li>
                            <li>31</li>    
                            <li>1</li>
                            <li>2</li>    
                            <li>3</li>
                            <li>4</li>            
                        </ul>
        ...

CSS

.dateTab{
    background:#fff;
    width:100%;
    margin:10px 0 0 0;
    overflow:hidden;
}

.dateInfoTab{
    width:100%;
    height:300px;
    background:gray;
}

.dateTab ul{
    list-style: none;
    width:10000px;
    padding:0;
    margin:0;
}

.dateTab ul li{
    overflow-y:hidden;
    float:left;
    border:1px solid #000;
    text-align: center;
    width: 30px;
}

.dragArea{
    width:100%;
    position:absolute;
    opacity:0.72;
    margin:11px 0 0 0;
    width:940px;
}

.dateDragHandler { width: 223px; height: 18px; 
background:#eaeaea; filter: alpha(opacity=72);
}

JavaScript

var newLeft = 0;
var oldLeft = 0;
var oldWidth = 0;
var newWidth = 0;
var gridSize = 31;

$(document).ready(function(){

   

    $('#dDragHandler').resizable({
    handles: 'e,w' ,
    grid: 32,
    distance: 28,
    maxWidth: 940,
    minWidth: 0,    
    resize: function(event, ui) {

       
    },
        stop : function(event, ui) {
        console.log("original width " + ui.originalSize.width);
        console.log("new width " + ui.size.width);
        
        console.log("original left " + ui.originalPosition.left);    
        console.log("new left " + ui.position.left);
        
        oldLeft = ui.originalPosition.left;
        oldWidth = ui.originalSize.width;
        newLeft = ui.position.left;
        newWidth = ui.size.width;
        calculateElementRange();
    }
});

$('.dateTab').find('ul').click(function(){
    alert('sdf');
});
    
    function calculateElementRange(){

    var enw = Math.abs(newWidth / gridSize);
    $('.dateInfoTab').html("Number of tabs selected = " + enw );
    }
});