Untitled

dabblet.css

body {
  padding: 20px;
}

.range-plot {
    position: relative;
    background: white;
    cursor: pointer;
    height: 50px;
}

.range-plot-window {
    width: 300px;
    //background: rgba(80, 80, 80, 0.5) url('http://dev.ngenix.net/static/stats.www/i/7a0955e6360541c217656e3c1edd7bffb381113f.png') repeat-x;
    background:  url('http://dev.ngenix.net/static/stats.www/i/7a0955e6360541c217656e3c1edd7bffb381113f.png') repeat-x;
    cursor: move;
    height: 100%;
    position: absolute;
    top: 0px;
    bottom: 0;
    right: 0;
}

.range-plot-window-lhandle {
    float: left;
    background: #808080;
    height: 100%;
    width: 1px;
}

.range-plot-window-rhandle {
    float: right;
    background: #808080;
    height: 100%;
    width: 1px;
}

.range-plot-window-handle {
    margin: 0px auto;
    padding-top: 16.5px;
    margin-left: -8px;
}

.range-plot-hint {
    position: absolute;
    font-size: 12px;
    background: red;
    background: #f1f1f1;
    width: 90px;
    text-align: center;
    left: -45px;
    top: -20px;
    padding: 5px;
}

dabblet.html

<div class="range-plot">
<canvas class="range-plot-canvas" width="785" height="50"></canvas>
<div class="range-plot-window ui-draggable ui-resizable" style="width: 259px; position: absolute; top: 0px; left: 525px; height: 50px;">
<div class="range-plot-window-lhandle">
<div class="range-plot-hint">
                            24 Jul 12 12:00
                        </div>
<img class="ui-resizable-handle ui-resizable-w range-plot-window-handle" src="http://dev.ngenix.net/static/stats.www/i/fc018ddc3fae382f93e4747d6be218961fe2b36e.png"></div>
</div>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}