<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3滑块拖动交互式特效 - 更多源码【www.96flw.com】</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="sliderContainer">
<div class="tick-slider">
<div class="tick-slider-header">
<h5><label for="weightSlider">总重量</label></h5>
<h5>kg</h5>
</div>
<div class="tick-slider-value-container">
<div id="weightLabelMin" class="tick-slider-label">0</div>
<div id="weightLabelMax" class="tick-slider-label">40</div>
<div id="weightValue" class="tick-slider-value"></div>
</div>
<div class="tick-slider-background"></div>
<div id="weightProgress" class="tick-slider-progress"></div>
<div id="weightTicks" class="tick-slider-tick-container"></div>
<input
id="weightSlider"
class="tick-slider-input"
type="range"
min="0"
max="40"
step="5"
value="9"
data-tick-step="5"
data-tick-id="weightTicks"
data-value-id="weightValue"
data-progress-id="weightProgress"
data-handle-size="18"
data-min-label-id="weightLabelMin"
data-max-label-id="weightLabelMax"
/>
</div>
<div class="tick-slider">
<div class="tick-slider-header">
<h5><label for="sizeSlider">总体积</label></h5>
<h5>cm</h5>
</div>
<div class="tick-slider-value-container">
<div id="sizeLabelMin" class="tick-slider-label">0</div>
<div id="sizeLabelMax" class="tick-slider-label">300</div>
<div id="sizeValue" class="tick-slider-value"></div>
</div>
<div class="tick-slider-background"></div>
<div id="sizeProgress" class="tick-slider-progress"></div>
<div id="sizeTicks" class="tick-slider-tick-container"></div>
<input
id="sizeSlider"
class="tick-slider-input"
type="range"
min="0"
max="300"
step="25"
value="150"
data-tick-step="25"
data-tick-id="sizeTicks"
data-value-id="sizeValue"
data-progress-id="sizeProgress"
data-handle-size="18"
data-min-label-id="sizeLabelMin"
data-max-label-id="sizeLabelMax"
/>
</div>
</div>
</div>
<script src="js/script.js"></script>
<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>更多源码<a href="http://www.96flw.com" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
