A seekable progress bar component for Vue 3 with TypeScript support.
npm install xns-seek-barimport { createApp } from 'vue'
import XnsSeekBarPlugin from 'xns-seek-bar'
const app = createApp(App)
app.use(XnsSeekBarPlugin)
app.mount('#app')<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><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"><xns-seek-bar :bar-color="'#ffdd00'" :current-value="33" :total-value="100" @seeked-to="handleSeek"></xns-seek-bar>| Option | Type | Required | Default |
|---|---|---|---|
| currentValue | Number | false | 0 |
| totalValue | Number | false | 300 |
| listen | Boolean | false | true |
| barHeight | Number | false | 0.5 |
| barColor | String (Hex) | false | false |
| barShadeColor | String (Hex) | false | false |
| intensity | Number (0.1 - 1) | false | 0 |
listen : Enable touch / tap.
seekedTo Returns a Number representing value of seeked position.