xns-seek-bar

XnsSeekBar

A seekable progress bar component for Vue 3 with TypeScript support.

Installation

npm install xns-seek-bar

Usage

As a Plugin (Global Registration)

import { createApp } from 'vue'
import XnsSeekBarPlugin from 'xns-seek-bar'

const app = createApp(App)
app.use(XnsSeekBarPlugin)
app.mount('#app')

As a Component (Local Registration)

<template>
  <XnsSeekBar 
    :current-value="currentValue"
    :total-value="100"
    @seeked-to="onSeek"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { XnsSeekBar } from 'xns-seek-bar'

const currentValue = ref(50)

const onSeek = (value: number) => {
  currentValue.value = value
}
</script>

In Browser

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xns-seek-bar/dist/index.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xns-seek-bar/dist/style.css">

Example

<xns-seek-bar :bar-color="'#ffdd00'" :current-value="33" :total-value="100" @seeked-to="handleSeek"></xns-seek-bar>

Options

Options Details

listen : Enable touch / tap.

Events

seekedTo Returns a Number representing value of seeked position.