not a real slider, but could become one

by hrabinowitz

HTML

<div id="progress" style="position:relative; width:100px; height:20px; border:1px solid #cccccc;">
   <p id="thumb" style="">&nbsp;</p>
</div>

<div class="slidecontainer">
  <p>Controlling range slider. It controls the width of thumb above.</p>
  <input type="range" min="1" max="100" value="50" id="basicRange">
</div>
<div>
	Value of controlling slider is <span id="outputFirst"></span>
</div>

CSS

#thumb {
	position:absolute; 
	left:0; 
	top:0; 
	background-color:#0000ff; 
	height:100%; 
	width:75%; 
	font-size:0px;
}

JavaScript

$('#basicRange').on('input change', function() {
	$('p#thumb').css('width', $('#basicRange').val() + '%');
})