先上一个效果图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<link rel="stylesheet" href="./css/normalize.css" />
<link rel="stylesheet" href="css/ion.rangeSlider.css" />
<link rel="stylesheet" href="css/ion.rangeSlider.skinFlat.css" id="styleSrc" />
<style>
body{
}
.irs-line{
background-color: #d8d8d8;
height: 2px;
top: 30px;
}
.irs-slider{
width: 18px;
height: 18px;
background: #fff;
border:1px solid #2cadd7;
border-radius: 3px;
}
.irs-bar{
background-color: #2cadd7;
height: 4px;
top: 28px;
}
.irs-from, .irs-to, .irs-single {
color: #333;
text-align: center;
width: 60px;
height: 20px;
top: -8px;
font-size: 14px;
line-height: 20px;
background-color: #fff;
border: 1px solid #ddd;
}
.irs-min,.irs-max{
visibility: hidden!important;
}
.irs-from:before, .irs-to:before, .irs-single:before{
position: absolute;
display: block;
content: "";
bottom: -10px;
left: 50%;
width: 0;
height: 0;
margin-left: -3px;
overflow: hidden;
border: 5px solid transparent;
border-top-color: #ddd;
}
.irs-from:after, .irs-to:after, .irs-single:after{
position: absolute;
display: block;
content: "";
bottom: -9px;
left: 50%;
width: 0;
height: 0;
margin-left: -3px;
overflow: hidden;
border: 5px solid transparent;
border-top-color: #fff;
}
</style>
</head>
<body>
<div style="position:relative; padding:50px;width:250px;margin:0 auto;font-size:12px;">
<input type="text" id="range" />
<br/><br/><br/>
</div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/ion.rangeSlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#range").ionRangeSlider({
min: 0,
max: 100,
from:0,
to: 100,
type: 'double',//设置类型
step: 1,
prefix: "",//设置数值前缀
postfix: "万",//设置数值后缀
prettify: true,
hasGrid: true
});
$("#selectStyle").change(function(){
$("#styleSrc").attr("href",$(this).val());
});
});
</script>
</body>
</html>
此插件更适合手机端一些,pc也可以用 本人是用在pc弹窗中一个效果
里面有些样式直接修改了
附上官方网站地址:http://ionden.com/a/plugins/ion.rangeSlider/index.html