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.
npm install vue-slide-barVerified import paths — ran on the pinned version, not inferred.
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.
Ensure you are using `vue-slide-bar` within a Vue 2 project, or provide a Vue 2 compatibility layer in Vue 3.
Always initialize and bind `v-model` to a `number` type data property in your component.
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.
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 }`.Declare the bound variable (e.g., `value: 50`) within your component's `data()` return object, ensuring it's initialized with a numeric default.
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]"`.