Track Slider for Vue.js

Track slider is a simple package for Vue. It provides a beautiful slider with a lot of customisations.

Example

import { ref } from 'vue';
import TrackSlider from "vue-track-slider"
import "vue-track-slider/style.css"
const value = ref(0);

<!-- Use v-model to get current track position. -->

<TrackSlider v-model="value" />
<div style="text-align: center;">{{ value }}</div>

Example with optional attributes

<TrackSlider v-model="value" :gap="4" :width="8" active-color="red" track-color="gray" width-unit="px" />

Attributes

• gap: gap between tracks in number. Default is 4.
• width: width of each track in number. Default is 4.
• activeColor: Color of active track
• trackColor: Color of tracks
• widthUnit: px, em, etc. Default is px.