{"id":12557,"library":"vue-range-component","title":"Vue Range Slider Component","description":"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.","status":"abandoned","version":"1.0.3","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/xwpongithub/vue-range-slider","tags":["javascript","rollup","vuejs","stylus"],"install":[{"cmd":"npm install vue-range-component","lang":"bash","label":"npm"},{"cmd":"yarn add vue-range-component","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-range-component","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, required for component rendering (specifically Vue 2.x).","package":"vue","optional":false}],"imports":[{"note":"The component is exported as a default export from the main package entry point.","wrong":"import { VueRangeSlider } from 'vue-range-component'","symbol":"VueRangeSlider","correct":"import VueRangeSlider from 'vue-range-component'"},{"note":"Requires a direct import of the CSS file for styling. Ensure your bundler handles CSS imports (e.g., Webpack with `style-loader`/`css-loader`).","wrong":"require('vue-range-component/dist/vue-range-slider.css')","symbol":"CSS Styles","correct":"import 'vue-range-component/dist/vue-range-slider.css'"},{"note":"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\">`.","symbol":"VueRangeSlider (global)","correct":"<script src=\"https://unpkg.com/vue-range-component@1.0.3/dist/vue-range-slider.min.js\"></script>"}],"quickstart":{"code":"<template>\n  <div>\n    <vue-range-slider ref=\"slider\" v-model=\"value\"></vue-range-slider>\n  </div>\n</template>\n<script>\nimport 'vue-range-component/dist/vue-range-slider.css'\nimport VueRangeSlider from 'vue-range-component'\n\nexport default {\n  data() {\n    return {\n      value: 1\n    }\n  },\n  components: {\n    VueRangeSlider\n  }\n}\n</script>","lang":"javascript","description":"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`."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","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.","error":"The slider cannot be used, because the component can not initialize the size or slider position."},{"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 }`).","cause":"The `VueRangeSlider` component was not properly registered with Vue before being used in the template of a parent component or application.","error":"[Vue warn]: Unknown custom element: <vue-range-slider> - did you register the component correctly?"}],"ecosystem":"npm"}