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>
     .........完整代码请登录后点击上方下载按钮下载查看