Registry / web-framework / vue-range-component

vue-range-component

library1.0.3jsnpmunverified

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.

web-framework

npm install vue-range-component

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-RANGE-COMPONEN

vue-range-component

web-frameworkjavascriptv1.0.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueRangeSlider

✓ import VueRangeSlider from 'vue-range-component'

✗ import { VueRangeSlider } from 'vue-range-component'

The component is exported as a default export from the main package entry point.

CSS Styles

✓ import 'vue-range-component/dist/vue-range-slider.css'

✗ require('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">`.

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>

Debug

Known issues

breakingThis 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.

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.0

deprecatedThe `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.

affects: >=1.0.0

Errors

Common errors & fixes

The slider cannot be used, because the component can not initialize the size or slider position.

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?

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 }`).

Upgrade

Version history

1.0.3latest on npm

Audit

Dependencies

vuerequiredPeer dependency, required for component rendering (specifically Vue 2.x).

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/xwpongithub/vue-range-slider ↗

packagehttps://www.npmjs.com/package/vue-range-component ↗