video-range-bar-vue

video clips bar

Usage no npm install needed!

<script type="module">
  import videoRangeBarVue from 'https://cdn.skypack.dev/video-range-bar-vue';
</script>

README

video-range-bar-vue

Preview Picture

πŸ— install

// npm
npm install video-range-bar-vue --save

// yarn
yarn add video-range-bar-vue

πŸ”¨ usage

// Global registry

import Vue from 'vue';
import VideoRangeBar from 'video-range-bar-vue';

Vue.use(VideoRangeBar);
<template>
  <VideoRangeBar :config="config" />
</template>

<script>

export default {
  data() {
    return {
       config: {
            startLeftSlider(value) {
                // ε·¦ζ»‘ε—ζŒ‰δΈ‹ε›žθ°ƒ
            },
            startRightSlider(value) {
                // ε³ζ»‘ε—ζŒ‰δΈ‹ε›žθ°ƒ
            },
            moveLeftSlider(value) {
                // ε·¦ζ»‘ε—ζ‹–εŠ¨ε›žθ°ƒ
            },
            moveRightSlider(value) {
                // ε³ζ»‘ε—ζ‹–εŠ¨ε›žθ°ƒ
            },
       }
    };
  }
};
</script>

// Component registry

<template>
  <VideoRangeBar  :config="config" />
</template>

<script>
import VideoRangeBar from 'video-range-bar-vue';
export default {
  components: {
    VideoRangeBar
  },
  data() {
    return {
     config: {
        startLeftSlider(value) {
            // ε·¦ζ»‘ε—ζŒ‰δΈ‹ε›žθ°ƒ
        },
        startRightSlider(value) {
            // ε³ζ»‘ε—ζŒ‰δΈ‹ε›žθ°ƒ
        },
        moveLeftSlider(value) {
            // ε·¦ζ»‘ε—ζ‹–εŠ¨ε›žθ°ƒ
        },
        moveRightSlider(value) {
            // ε³ζ»‘ε—ζ‹–εŠ¨ε›žθ°ƒ
        },
     }
    };
  }
};
</script>