版本1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>进度条</title>
<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
*{margin:0;padding:0;}
.fl{float:left;}
.fr{float:right;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}
.drag-progress{position:relative;500px;border-left:2px solid #ff7e32;border-right:2px solid #ff7e32;margin:20px auto;padding:5px 0;font-size:14px;}
.l-left,.h-right{100px;background:#e6e6e6;height:20px;line-height:20px;text-align:center;}
.dg-range{300px;background:#32ffff;height:20px;line-height:20px;}
.Mtarget{4px;height:30px;line-height:30px;background:#009900;margin-top:-5px;position:absolute;z-index:999;}
.Mtarget-on{4px;height:30px;line-height:30px;background:red;margin-left:30px;margin-top:-5px;position:absolute;z-index:999;}
.num-min{position:absolute;left:-66px;top:8px;}
.num-L{position:absolute;left:80px;top:8px;}
.num-H{position:absolute;left:373px;top:8px;}
.num-max{position:absolute;left:506px;top:8px;}
</style>
<script>
$(function(){
var $min=$(".num-min span");
var $max=$(".num-max span");
var $mumL=$(".num-L span");
var $mumH=$(".num-H span");
var $target=$(".Mtarget");
var num=0;
var min=parseInt($min.text());
var max=parseInt($max.text());
var mumL=parseInt($mumL.text());
var mumH=parseInt($mumH.text());
var target=parseInt($target.attr("title"));
if(target > min && target < mumL){
num=(target-min)/(mumL-min)*100;
$target.css({'margin-left':num+'px','background':'red'});
}
else if(target > mumL && target < mumH){
num=(target-min)/(mumH-min)*400;
$target.css({'margin-left':num+'px','background':'green'});
}
else {
num=(target-min)/(max-min)*500;
$target.css({'margin-left':num+'px','background':'red'});
}
});
</script>
</head>
<body>
<div class="drag-progress clearfix">
<div class="num-min">min:<span>1000</span></div>
<div class="l-left fl"></div>
<div class="num-L">L:<span>2000</span></div>
<div class="dg-range fl"></div>
<div class="num-H">H:<span>3200</span></div>
<div class="h-right fr"></div>
<div class="num-max">max:<span>4100</span></div>
<div class="Mtarget" title="2500"></div>
</div>
</body>
</html>
版本2：jQuery字符串拼接而成的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>进度条</title>
<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
*{margin:0;padding:0;}
.fl{float:left;}
.fr{float:right;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}
.drag-progress{position:relative;660px;border-left:2px solid #ff7e32;border-right:2px solid #ff7e32;margin:20px auto;padding:5px 0;font-size:14px;}
.drag-progress1{position:relative;560px;border-left:2px solid #ff7e32;border-right:2px solid #ff7e32;margin:20px auto;padding:5px 0;font-size:14px;}
.least-left,.most-right{80px;background:#e6e6e6;height:20px;line-height:20px;text-align:center;}
.num-least{position: absolute;left:-66px;top:8px;}
.num-most{position: absolute;right:-66px;top:8px;}
.l-left,.h-right{100px;background:#e6e6e6;height:20px;line-height:20px;text-align:center;}
.dg-range{300px;background:#32ffff;height:20px;line-height:20px;}
.Mtarget{4px;height:30px;line-height:30px;background:#009900;margin-top:-5px;position:absolute;left:80px;z-index:999;}
.num-min{position:absolute;left:23px;top:8px;}
.num-L{position:absolute;left:160px;top:8px;}
.num-L1{position:absolute;left:86px;top:8px;}
.num-H{position:absolute;left:455px;top:8px;}
.num-H1{position:absolute;left:355px;top:8px;}
.num-max{position:absolute;left:530px;top:8px;z-index:999;}
.num-max1{position:absolute;left:480px;top:8px;z-index:999;}
.min-br,.max-br,.max-br1{2px;height:30px;line-height:30px;background:red;margin-top:-5px;position:absolute;z-index:999;}
.min-br{margin-left:80px;}
.max-br{margin-left:550px;}
.max-br1{margin-left:480px;}
</style>
<script>
$(function(){
var str=$('<div class="drag-progress clearfix">'+
'<div class="least-left fl"></div>'+
'<div class="min-br"></div>'+
'<div class="num-min">min:<span>1000</span></div>'+
'<div class="l-left fl"></div>'+
'<div class="num-L">L:<span>1000</span></div>'+
'<div class="dg-range fl"></div>'+
'<div class="num-H">H:<span>3200</span></div>'+
'<div class="h-right fl"></div>'+
'<div class="most-right fl"></div>'+
'<div class="num-max">max:<span>4100</span></div>'+
'<div class="max-br"></div>'+
'<div class="Mtarget" title="2900"></div>'+
'</div>');
$('body').append(str);
var $min=$(".num-min span");
var $max=$(".num-max span");
var $numL=$(".num-L span");
var $numH=$(".num-H span");
var $target=$(".Mtarget");
var num=0;
var min=parseInt($min.text());
var max=parseInt($max.text());
var numL=parseInt($numL.text());
var numH=parseInt($numH.text());
var target=parseInt($target.attr("title"));
if(target < min){
$target.css({'margin-left':'-25px','background':'red'});
}
// else if(target==numL){
// $target.siblings('.l-left').remove().end()
// .parents('.drag-progress').removeClass('drag-progress').addClass('drag-progress1').end()
// .siblings('.num-L').removeClass('num-L').addClass('num-L1').end()
// .siblings('.num-H').removeClass('num-H').addClass('num-H1').end()
// .siblings('.num-max').removeClass('num-max').addClass('num-max1').end()
// .siblings('.max-br').removeClass('max-br').addClass('max-br1').end();
// ;
// }
else if(target >= min && target <= numL){
num=(target-min)/(numL-min)*100;
$target.css({'margin-left':num+'px','background':'red'});
}
else if(target >= numL && target <= numH){
num=(target-min)/(numH-min)*300+100;
$target.css({'margin-left':num+'px','background':'green'});
}
else if(target > numH && target < max){
num=(target-min)/(max-min)*100+400;
$target.css({'margin-left':num+'px','background':'red'});
}
else if(target > max){
$target.css({'margin-left':'525px','background':'red'});
}
});
</script>
</head>
<body>
</body>
</html>