Vue Range Slider Component

1.0.3 · abandoned · verified Sun Apr 19

Vue Range Slider Component (npm: `vue-range-component`) is a UI library providing a customizable range slider based on Vue.js 2.x. The current and only stable version is 1.0.3, last published over six years ago, indicating the project is no longer actively maintained. It offers features such as horizontal and vertical orientations, piecewise value display, configurable tooltips, and support for both single-value and range selection. It handles display of minimum and maximum values and is designed to be compatible with both PC and mobile touch interfaces. Given its reliance on Vue 2.x and lack of recent updates, it is not suitable for modern Vue 3 projects. It was built with Rollup and uses Stylus for styling, shipping with pre-compiled CSS.

Common errors

```
The slider cannot be used, because the component can not initialize the size or slider position.
```
cause The component was initialized while hidden (e.g., using `v-show="false"` or `display: none`) or its layout changed unexpectedly after initialization without being refreshed.

fix Ensure the component is rendered with `v-if` when visible, use the component's `show` prop, or manually call the `refresh` method on the component instance (`this.$refs.slider.refresh()`) once the component becomes visible or its dimensions stabilize.
```
[Vue warn]: Unknown custom element: <vue-range-slider> - did you register the component correctly?
```
cause The `VueRangeSlider` component was not properly registered with Vue before being used in the template of a parent component or application.

fix Ensure `import VueRangeSlider from 'vue-range-component'` is present in your script and the component is listed in the `components` option of your Vue instance or parent component (e.g., `components: { VueRangeSlider }`).

Warnings

breaking This package is designed exclusively for Vue.js 2.x and is incompatible with Vue.js 3.x applications. Attempting to use it in a Vue 3 project will result in runtime errors due to fundamental API changes and lack of compatibility updates.
Fix: For Vue 3 projects, consider actively maintained alternatives like 'vue-slider-component' or 'primevue/slider' which support the newer Vue ecosystem. If migrating to Vue 3 is not an option, ensure you are using Vue 2.x.
gotcha The component may fail to initialize correctly or become unresponsive if rendered inside a `v-show="false"` container, with a `display: none` style, or if its position is changed via `transform`, `animation`, or `margin` after initial render.
Fix: Use `v-if` instead of `v-show` or `display: none` to ensure the component is mounted when visible. Alternatively, use the `show` prop to control visibility, or call the `refresh` method on the component instance (`this.$refs.slider.refresh()`) after it becomes visible or its layout changes.
deprecated The `vue-range-component` package is abandoned and has not been updated since 2018. It no longer receives bug fixes, security patches, or feature enhancements. Using it in production may introduce security vulnerabilities, compatibility issues with newer browser versions or build tools, and makes future maintenance difficult.
Fix: Migrate to a currently maintained range slider component. If remaining on Vue 2.x, research alternatives that still offer support. For new projects, strongly recommend upgrading to Vue 3.x and using a compatible component.

Install

npm install vue-range-component npm
yarn add vue-range-component yarn
pnpm add vue-range-component pnpm

Imports

VueRangeSlider
wrong:
```
import { VueRangeSlider } from 'vue-range-component'
```
correct:
```
import VueRangeSlider from 'vue-range-component'
```
The component is exported as a default export from the main package entry point.
CSS Styles
wrong:
```
require('vue-range-component/dist/vue-range-slider.css')
```
correct:
```
import 'vue-range-component/dist/vue-range-slider.css'
```
Requires a direct import of the CSS file for styling. Ensure your bundler handles CSS imports (e.g., Webpack with `style-loader`/`css-loader`).
VueRangeSlider (global)
```
<script src="https://unpkg.com/vue-range-component@1.0.3/dist/vue-range-slider.min.js"></script>
```
When included via a script tag, `VueRangeSlider` becomes available globally on the window object. This method also requires linking the minified CSS via `<link rel="stylesheet" href="https://unpkg.com/vue-range-component@1.0.3/dist/vue-range-slider.min.css">`.

Quickstart

Demonstrates the basic integration of the VueRangeSlider component into a Vue 2.x single-file component, including CSS import and two-way data binding with `v-model`.

<template>
  <div>
    <vue-range-slider ref="slider" v-model="value"></vue-range-slider>
  </div>
</template>
<script>
import 'vue-range-component/dist/vue-range-slider.css'
import VueRangeSlider from 'vue-range-component'

export default {
  data() {
    return {
      value: 1
    }
  },
  components: {
    VueRangeSlider
  }
}
</script>

view raw JSON →