Range Selection | selecionando ranges | jQuery Plugin

Range Selection é um plugin jQuery que lhe permite fazer uma range selecionável. Atualmente eu não encontrei nenhuma documentação deste plugin, mais pelo menos ele funciona. Caso algum dia você arranje uma utilidade para isso me diga.

Como?

<div id="rangeselection">
  <div class="highlight">
    <span class="rangestart"><span class="value"></span><span class="extra"> ...</span></span>
    <span class="rangestop"><span class="extra">... </span><span class="value"></span></span>
  </div>
</div>

<p>range: <span id="range"></span></p>

Código javascript.

function on_selection(range) {
    $('#range').html(range.toString());
};

$(document).ready(function() {
	$('#rangeselection').rangeselection({
		width: 400,
		height: 100,
		selectionrange: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
		callback: on_selection,
		num_labels: 10
    });
	/*width: tamanho
	height: altura
	selectionrange:  o que vai estar na range
	callback: chamada de resposta
	num_labels: quantidade de labels que vai ser mostrado*/

});

Agora vem o código CSS:

#rangeselection {
    width: 300px;
    height: 100px;
    border: 1px solid black;
}

.rangelabel {
    float: left;
    z-index: 100;
}

.rangelabelend {
    z-index: 100;
}

.rangestop {
    position: relative;
    float: right;
}

.rangestart {
    position: relative;
}

.legend_box {
    position: absolute;
    height: 10px;
    width: 10px;
    background: #ddd;
    z-index: -50;
}

.highlight {
    background: yellow;
    opacity: 0.5;
    position: absolute;
    width: 50px;
    height: 20px;
    z-index: -100;
}

Veja o DEMO.

Site