javascript函数实现滚动条的选择数值并显示

[Workholic_365]

代码如下
Code:
<div class="control-group">
<label class="control-label" style="font:bold"> Brightness </label>
<div class="controls">
<!--<input id="k_brightness1" type="range" min="0" max="20" value="1" step="1" onmouseover="change_brightness(value)">
<input id="brightness" type="text" width="50" >-->
<div class="light_control inline" id="k_brightness1">
<div class="red-bar" style="left: 50px">
</div>
</div>
<input id="k_brightness_show" class="input-micro" type="text" value="" width="10" >
</div>
</div>
.CSS
.light_control.inline{display:inline-block;*zoom:1;margin-right:8px;*display:inline;}

.red-bar{width:8px;height:24px;top:-4px;background:#f89406;line-height:16px;text-align:center;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
想要实现、达到的效果如下：


目前已经实现了页面中的静态效果，但是还没能实现滚动条的滑动和后面框里的数据的同时变化。
请问如何使用javascript来实现这个效果

图片1为目前所弄的效果，现在的目的是要实现图片2的效果

[Workholic_365]

只需要使用javascript实现，不要用jquery函数去写