vue时间段选择器效果-html代码-BFW代码库

vue时间段选择器效果

代码语言：html

所属分类：选择器

代码描述：vue时间段选择器效果，可以选择不同的时间段

代码标签：效果

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

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

<head>
    <meta charset="UTF-8">
    <title>time range select</title>
    <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/tailwind.min.css">


    <style>

        .transition {
            transition-duration: .4s;
        }
        .cursor-grab {
            cursor: grab;
        }
        .cursor-grabbed {
            cursor: grabbing;
        }
    </style>


</head>

<body>

    <div class="min-w-screen bg-gray-800 min-h-screen flex justify-center items-center">
        <div class="max-w-sm bg-gray-200 p-4 pb-6 shadow-2 flex-1 my-6 rounded">
            <h1 class="text-2xl text-gray-800 my-6 text-center">Select range</h1>

            <div id="app">
                <div class="w-full flex">
                    <timeslider name="time-from" class="flex-1 bg-gray-300 relative overflow-hidden shadow-inner" v-model='from' :max-value="to"></timeslider>
                    <timeslider name="time-to" class="ml-2 flex-1 bg-gray-300 relative overflow-hidden shadow-inner" v-model='to' :min-value="from"></timeslider>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/hammer.min.js"></script>

    <script>
        Vue.component('timeslider', {
            props: {
                name: String,
                value: Number,
                maxValue: {
                    default: 86400,
                        type: Number
                    }, // max value that's available to set (in seconds)
                    minValue: {
                        default: 0,
                            type: Number
                        }, // minimum value that's available to set (in seconds)
                    },
                    template: `
                    <div ref="wrapper" :class=&.........完整代码请登录后点击上方下载按钮下载查看