jQuery进度条插件rangeSlider，带刻度，rangeSlider实现进度范围选择案例

<link rel="stylesheet" href="../../resources/js/plugins/ion.rangeSlider-2.2.0/css/ion.rangeSlider.css">
<link rel="stylesheet" href="../../resources/js/plugins/ion.rangeSlider-2.2.0/css/ion.rangeSlider.skinFlat.css">

<script src="../../resources/js/min/jquery-1.9.1.min.js"></script>
<script src="../../resources/js/plugins/ion.rangeSlider-2.2.0/js/ion.rangeSlider.min.js"></script>

<div style="width: 76%;">
<div id="costRange"></div>
</div>

// 造价范围选择
$("#costRange").ionRangeSlider({
type: "double",
min: 100,
max: 1100,
from: 200,
to: 700,
step:100,
hide_min_max: true,
grid: true
});

附图：