vue横向拖动进行数值增减效果代码-html代码-BFW代码库

vue横向拖动进行数值增减效果代码

代码语言：html

代码描述：vue横向拖动进行数值增减效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        .vue-scrubber {
            font-size: 15px;
            padding: 0.5em;
            border: 0;

            cursor: ew-resize;
            background: rgba(0, 0, 0, 0.08);
            color: white;
            -webkit-user-select: none;

            font-feature-settings: "lnum" 1;
        }

        .vue-scrubber:hover, .vue-scrubber:focus {
            outline: 0;
            box-shadow: none;
        }


        /** Demo CSS */

        body {
            font-family: "Helvetica Neue", "Arial", sans-serif;
            background: #6247AA;
            color: #E2CFEA;
            -webkit-font-smoothing: antialiased;

            padding: 2rem;
            max-width: 800px;
            margin: 0 auto;
        }

        h1 {
            font-weight: 100;
            letter-spacing: 2px;
        }

        h1 strong {
            letter-spacing: 0;
        }
        p {
            line-height: 1.4;
            -webkit-font-smoothing: antialiased;
            opacity: 0.8;
            font-size: 1rem;
        }

        .parameters {
            margin-top: 4rem;
            background: #6247AA;
        }

        label {
            display: block;
            margin-bottom: 2rem;
        }

        label span {
            display: inline-block;
            width: 100px;
        }

        code {
            font-family: "Monaco", monospaced;
            font-size: 15px;
        }
    </style>


</head>

<body translate="no">
    <div id="app">



        <div class="parameters">

            <h3>Demo</h3>

            <label for="">
                <span>Value</span>
                <scrubber :value="value" :min="min" :max="max" :steps="steps"></scrubber>           </label>

        </div>


        <div class="parameters">
            <h3>Props</h3>

            <label for="">
                <span>Min</span>
                <scrubber :value.sync="min" :min="0" :max="max" :steps="1">  </scrubber>
            </label>

            <label for="">
                <span>Max</span>
                <scrubber :value.sync="max" :min="0" :steps="2"></scrubber>
            </label>


            <label for="">
                <span>Steps</span>
                <scrubber :value.sync="steps" :min="0" :max="10" :steps="0.1"></scrubber>
           .........完整代码请登录后点击上方下载按钮下载查看