拉动十进制进度条

话不多说，上代码：

.ui-mobile .ui-page{
height: 106px !important;
min-height: 106px !important;
}
.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page{
top: 29px;
}
.ui-mobile .ui-page-active{
overflow-x:auto;
}
.ui-slider-track{
margin: 0 6px 0 65px;
}
div.ui-slider{
margin-top: 35px;
padding-top: 10px;
}
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper{
background:none;
}
.ui-page-theme-a .ui-btn:focus{
-webkit-box-shadow: none;
box-shadow: none;
}
.ui-page-theme-a .ui-body-inherit{
background: none;
}
input[type='number']{
width: 7% !important;
text-align: right;
height: auto !important;
border: none !important;
padding: 0 !important;
margin: 0;
position: absolute;
right: 16px;
top: 16px;
background: none;
color: #333333;
font-size: 13px;
font-family: PingFangSC-Regular,PingFang SC;
font-weight: 400;
}
.ui-shadow-inset{
-webkit-box-shadow: none;
box-shadow: none;
}
.ui-slider-track .ui-btn.ui-slider-handle{
width: 24px;
height: 24px;
margin: -11px 0 0 -15px;
}
.ui-page-theme-a .ui-btn{
background: rgba(255,255,255,1);
border-radius: 14px;
border: 1px solid rgba(199,0,9,1);
}
.ui-page-theme-a .ui-bar-inherit{
background-color: rgba(230,230,230,1);
border-color: rgba(230,230,230,1);
text-shadow: 0 1px 0 rgba(230,230,230,1);
height: 2px;
background: rgba(230,230,230,1);
border-radius: 1px;
}
.ui-page-theme-a .ui-slider-track .ui-btn-active{
background-color: #C70009;
border-color: #C70009;
color: #fff;
text-shadow: 0 1px 0 #C70009;
height: 2px;
border-radius: 1px;
}

html

<div data-role="page">
　　<div data-role="main" class="ui-content">
　　　　<form method="post" action="demoform.asp">
　　　　　　<input type="range" name="points" id="points" value="20" min="20" max="80" step="10" data-highlight="true">
　　　　</form>
　　</div>
</div>

 

<li>
　　<h4>首付比例(%)</h4>
　　<span id="boy">已选择 <strong id="title">%</strong></span>
</li>
@gzh.gxFinance.pages.dragDrop()

这个是我们的程序中引用公共页面用的，就是上面所贴的代码，单独写在一个页面中，相当于插件