Vue Slide Bar Component

Common errors

• Failed to resolve component: VueSlideBar

  cause The VueSlideBar component has not been registered correctly in your Vue application.
  fix Globally register the component with `Vue.component('VueSlideBar', VueSlideBar)` in your `main.js` or `app.js` file, or locally register it within a component's `components` option: `components: { VueSlideBar }`.

• Property or method "value" is not defined on the instance but referenced during render.

  cause The `v-model` directive is bound to a data property that does not exist or is not correctly initialized in the component's `data()` function.
  fix Declare the bound variable (e.g., `value: 50`) within your component's `data()` return object, ensuring it's initialized with a numeric default.

• Invalid prop: type check failed for prop "data". Expected Array, got undefined.

  cause When using the slider with discrete values, the `:data` prop was either not provided or was provided with a non-array value.
  fix Ensure the `:data` prop is always bound to a valid JavaScript array of numbers when using custom data points for the slider, e.g., `:data="[10, 20, 30]"`.

Warnings

• gotcha This component is built for Vue 2. Directly integrating it into a Vue 3 project will likely lead to errors due to breaking changes in Vue's API and reactivity system, unless a compatibility layer like `@vue/compat` is used.
  Fix: Ensure you are using `vue-slide-bar` within a Vue 2 project, or provide a Vue 2 compatibility layer in Vue 3.
• gotcha The `v-model` binding expects a numeric value. Binding it to a non-numeric type (e.g., string, object) will cause unexpected behavior or errors.
  Fix: Always initialize and bind `v-model` to a `number` type data property in your component.
• gotcha Custom styling relies on specific prop names (`processStyle`, `labelStyles`, `tooltipStyles`). Incorrect property names or invalid CSS object structures will result in styles not being applied.
  Fix: Refer to the documentation for the exact object structure and property names for styling props. Ensure your CSS properties are camelCased in the style object.

Install

• npm install vue-slide-bar npm
• yarn add vue-slide-bar yarn
• pnpm add vue-slide-bar pnpm

Imports

• VueSlideBar
  wrong:

  import { VueSlideBar } from 'vue-slide-bar'

  correct:

  import VueSlideBar from 'vue-slide-bar'

  The component is exported as a default export in ESM. Named imports will fail.
• VueSlideBar

  const VueSlideBar = require('vue-slide-bar')

  This CommonJS `require` syntax is compatible but less common in modern Vue CLI projects which typically use ESM.
• Vue
  wrong:

  const Vue = require('vue')

  correct:

  import Vue from 'vue'

  Required for global component registration using `Vue.component('VueSlideBar', VueSlideBar)`.

Quickstart

This quickstart demonstrates a basic Vue Slide Bar with v-model binding, and a more advanced setup with custom data points, labels, and styling, including event handling.

<template>
  <div id="app">
    <h1>Vue Slide Bar Demo</h1>
    <div style="width: 80%; margin: 50px auto;">
      <h2>Simple Slider</h2>
      <VueSlideBar v-model="simpleValue"/>
      <p>Value: {{ simpleValue }}</p>

      <h2>Slider with Custom Range and Labels</h2>
      <VueSlideBar
        v-model="rangeSlider.value"
        :data="rangeSlider.data"
        :range="rangeSlider.range"
        :labelStyles="{ color: '#fff', backgroundColor: '#337ab7' }"
        :processStyle="{ backgroundColor: '#337ab7' }"
        @callbackRange="handleRangeCallback">
        <template slot="tooltip" slot-scope="tooltip">
          <span>{{ tooltip.label || tooltip.value }}</span>
        </template>
      </VueSlideBar>
      <p>Value: {{ rangeSlider.value }} (Label: {{ rangeLabel }})</p>
    </div>
  </div>
</template>

<script>
import VueSlideBar from 'vue-slide-bar';

export default {
  name: 'App',
  components: {
    VueSlideBar,
  },
  data() {
    return {
      simpleValue: 50,
      rangeLabel: '',
      rangeSlider: {
        value: 45,
        data: [15, 30, 45, 60, 75, 90, 120],
        range: [
          { label: '15 mins' },
          { label: '30 mins', isHide: true },
          { label: '45 mins' },
          { label: '1 hr', isHide: true },
          { label: '1 hr 15 mins' },
          { label: '1 hr 30 mins', isHide: true },
          { label: '2 hrs' }
        ]
      }
    };
  },
  methods: {
    handleRangeCallback(val) {
      this.rangeLabel = val.label;
    },
  },
  mounted() {
      const initialRangeItem = this.rangeSlider.range.find(
          (item, index) => this.rangeSlider.data[index] === this.rangeSlider.value
      );
      if (initialRangeItem) {
          this.rangeLabel = initialRangeItem.label;
      }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>