anime实现带刻度上下拖拽弹性range范围取值器美化代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：anime实现带刻度上下拖拽弹性range范围取值器美化代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    body {
    background-color: #ffffff;
  
    overflow: hidden;
}

.range__wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 480px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.2);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    overflow: hidden;
}

.range__slider {
    position: absolute;
    left: 0;
    top: 0;
}

.range__slider__path {
    fill: #FF4B81;
}

.range__marks__path {
    fill: none;
    stroke: inherit;
    stroke-width: 1px;
}

.range__marks__pink {
    stroke: #FF4B81;
}

.range__marks__white {
    stroke: white;
}

.range__values {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.range__value {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    padding: 40px 30px;
}

.range__value--top {
    position: absolute;
    bottom: 100%;
    color: #FF4B81;
}

.range__value--bottom {
    color: white;
}

.range__value__number {
    font-size: 70px;
    margin: 0 10px;
}

.range__value__number--top {
    transform-origin: 100% 100%;
}

.range__value__number--bottom {
    transform-origin: 100% 0;
}

.range__value__text {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    text-transform: uppercase;
}

.range__value__text span:first-child {
    margin-bottom: 3px;
}

.range__value__text--top {
    align-self: flex-end;
    margin-bottom: 13px;
}

.range__value__text--bottom {
    margin-top: 10px;
}

</style>

</head>
<body>
<!-- partial:index.partial.html -->
<!-- Wrapper for the range input slider -->

 <div style="width:320px;margin:0 auto;">
    <input class="range__input" type="range" min="30" max="100" value="64"/>  
 </div>
<div class="range__wrapper">


    <!-- SVG elements -->
    <svg class="range__slider" width="320px" height="480px" viewBox="0 0 320 480">
        <defs>
            <!-- Range marks symbol, it will be reused below -->
            <symbol id="range__marks" shape-rendering="crispEdges">
                <path class="range__marks__path" d="M 257 30 l 33 0"></path>
                <path class="range__marks__path" d="M 268 60 l 22 0"></path>
                <path class="range__marks__path" d="M 278 90 l 12 0"></path>
                <path class="range__marks__path" d="M 278 120 l 12 0"></path>
                <path class="range__marks__path" d="M 278 150 l 12 0"></path>
                <path class="range__marks__path" d="M 278 180 l 12 0"></path>
                <path class="range__marks__path" d="M 278 210 l 12 0"></path>
                <path class="range__marks__path" d="M 278 240 l 12 0"></path>
                <path class="range__marks__path" d="M 278 270 l 12 0"></path>
                <path class="range__marks__path" d="M 278 300 l 12 0"></path>
                <path class="range__marks__path" d="M 278 330 l 12 0"></path>
                <path class="range__marks__path" d="M 278 360 l 12 0"></path>
                <path class="range__marks__path" d="M 278 390 l 12 0"></path>
                <path class="range__marks__path" d="M 268 420 l 22 0"></path>
                <path class="range__marks__path" d="M 257 450 l 33 0"></path>
            </symbol>
            <!-- This clipPath element will allow us to hide/show the white marks properly -->
            <!-- The `path` used here is an exact copy of the `path` used for the slider below -->
            <clipPath id="range__slider__clip-path">
                <path class="range__slider__path" d="M 0 480 l 320 0 l 0 480 l -320 0 Z"></path>
            </clipPath>
        </defs>
        <!-- Pink marks -->
        <use xlink:href="#range__marks" class="range__marks__pink"></use>
        <!-- Slider `path`, that will be morphed properly on user interaction -->
        <path class="range__slider__path" d="M 0 480 l 320 0 l 0 480 l -320 0 Z"></path>
        <!-- Clipped white marks -->
        <use xlink:href="#range__marks" class="range__marks__white" clip-path="url(#range__slider__clip-path)"></use>
    </svg>

    <!-- Range values -->
    <div class="range__values">
        <div class="range__value range__value--top">
            <!-- This element will be updated in the way: `100 - inputValue` -->
            <span class="range__value__number range__value__number--top"></span>
            <!-- Some text for the `top` value -->
            <span class="range__value__text range__value__text--top">
                <span>Points</span>
                <span>You Need</span>
            </span>
        </div>
        <div class="range__value range__value--bottom">
            <!-- This element will be updated with the `inputValue` -->
            <span class="range__value__number range__value__number--bottom"></span>
            <!-- Some text for the `bottom` value -->
            <span class="range__value__text range__value__text--bottom">
                <span>Points</span>
                <span>You Have</span>
            </span>
        </div>
    </div>
</div>
<!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/anime.3.2.1.js"></script><script >
      (function() {

    // Variables to use later
    var rangeWrapper = d.........完整代码请登录后点击上方下载按钮下载查看