{"id":15918,"library":"vue-slide-bar","title":"Vue Slide Bar Component","description":"vue-slide-bar is a lightweight and straightforward slider component designed for Vue 2 applications. Currently stable at version 1.2.0, this package provides a customizable UI element for selecting values within a range or from a predefined dataset. While a specific release cadence isn't published, updates appear to be driven by bug fixes or minor feature additions. Its key differentiators include simple integration, support for both continuous numeric ranges and discrete data points with custom labels, and extensive styling options for the slider bar, labels, and tooltips. It allows for flexible configuration of minimum/maximum values, custom line height, and a callback function for range value changes. The component focuses on ease of use within existing Vue 2 projects, offering both global and local component registration methods.","status":"active","version":"1.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/biigpongsatorn/vue-slide-bar","tags":["javascript"],"install":[{"cmd":"npm install vue-slide-bar","lang":"bash","label":"npm"},{"cmd":"yarn add vue-slide-bar","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-slide-bar","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, required for component functionality in a Vue 2 application.","package":"vue","optional":false}],"imports":[{"note":"The component is exported as a default export in ESM. Named imports will fail.","wrong":"import { VueSlideBar } from 'vue-slide-bar'","symbol":"VueSlideBar","correct":"import VueSlideBar from 'vue-slide-bar'"},{"note":"This CommonJS `require` syntax is compatible but less common in modern Vue CLI projects which typically use ESM.","symbol":"VueSlideBar","correct":"const VueSlideBar = require('vue-slide-bar')"},{"note":"Required for global component registration using `Vue.component('VueSlideBar', VueSlideBar)`.","wrong":"const Vue = require('vue')","symbol":"Vue","correct":"import Vue from 'vue'"}],"quickstart":{"code":"<template>\n  <div id=\"app\">\n    <h1>Vue Slide Bar Demo</h1>\n    <div style=\"width: 80%; margin: 50px auto;\">\n      <h2>Simple Slider</h2>\n      <VueSlideBar v-model=\"simpleValue\"/>\n      <p>Value: {{ simpleValue }}</p>\n\n      <h2>Slider with Custom Range and Labels</h2>\n      <VueSlideBar\n        v-model=\"rangeSlider.value\"\n        :data=\"rangeSlider.data\"\n        :range=\"rangeSlider.range\"\n        :labelStyles=\"{ color: '#fff', backgroundColor: '#337ab7' }\"\n        :processStyle=\"{ backgroundColor: '#337ab7' }\"\n        @callbackRange=\"handleRangeCallback\">\n        <template slot=\"tooltip\" slot-scope=\"tooltip\">\n          <span>{{ tooltip.label || tooltip.value }}</span>\n        </template>\n      </VueSlideBar>\n      <p>Value: {{ rangeSlider.value }} (Label: {{ rangeLabel }})</p>\n    </div>\n  </div>\n</template>\n\n<script>\nimport VueSlideBar from 'vue-slide-bar';\n\nexport default {\n  name: 'App',\n  components: {\n    VueSlideBar,\n  },\n  data() {\n    return {\n      simpleValue: 50,\n      rangeLabel: '',\n      rangeSlider: {\n        value: 45,\n        data: [15, 30, 45, 60, 75, 90, 120],\n        range: [\n          { label: '15 mins' },\n          { label: '30 mins', isHide: true },\n          { label: '45 mins' },\n          { label: '1 hr', isHide: true },\n          { label: '1 hr 15 mins' },\n          { label: '1 hr 30 mins', isHide: true },\n          { label: '2 hrs' }\n        ]\n      }\n    };\n  },\n  methods: {\n    handleRangeCallback(val) {\n      this.rangeLabel = val.label;\n    },\n  },\n  mounted() {\n      const initialRangeItem = this.rangeSlider.range.find(\n          (item, index) => this.rangeSlider.data[index] === this.rangeSlider.value\n      );\n      if (initialRangeItem) {\n          this.rangeLabel = initialRangeItem.label;\n      }\n  }\n};\n</script>\n\n<style>\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n</style>","lang":"javascript","description":"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."},"warnings":[{"fix":"Ensure you are using `vue-slide-bar` within a Vue 2 project, or provide a Vue 2 compatibility layer in Vue 3.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always initialize and bind `v-model` to a `number` type data property in your component.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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 }`.","cause":"The VueSlideBar component has not been registered correctly in your Vue application.","error":"Failed to resolve component: VueSlideBar"},{"fix":"Declare the bound variable (e.g., `value: 50`) within your component's `data()` return object, ensuring it's initialized with a numeric default.","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.","error":"Property or method \"value\" is not defined on the instance but referenced during render."},{"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]\"`.","cause":"When using the slider with discrete values, the `:data` prop was either not provided or was provided with a non-array value.","error":"Invalid prop: type check failed for prop \"data\". Expected Array, got undefined."}],"ecosystem":"npm"}