CSS3滑块拖动交互式特效代码下载


CSS3滑块拖动交互式特效代码下载
CSS3滑块拖动交互式特效代码下载以及滑块拖动、交互式等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script  src="js/script.js"></script>

3. HTML代码

<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>
<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章