Registry / web-framework / vue-3-slider-component

vue-3-slider-component

JSON →
library1.0.2jsnpmunverified

vue-3-slider-component is a highly customizable slider component specifically designed for Vue 3 applications. It is currently at version 1.0.2 and actively maintained, demonstrating a consistent release cadence with several recent bug fixes and minor improvements. This package is a direct fork of the popular `NightCatSame/vue-slider-component` (version 3.2.10), meticulously rewritten from the ground up to ensure full compatibility with Vue 3's reactivity system, Composition API, and Options API. Key differentiators and features include enhanced customizability options, support for configuring multiple slider instances within a single component, and the ability to define and display custom marks along the slider track. A significant change introduced in version 1.0.0 is the discontinuation of automatic transpilation for legacy browsers, requiring developers to implement their own transpilation solutions if support for older environments is necessary. The library ships with comprehensive TypeScript type definitions, providing a robust and type-safe development experience. Users should note that while it originates from the Vue 2 component, its specifications and API may differ in specific ways due to the Vue 3 rewrite.

web-framework
npm install vue-3-slider-component
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · VUE-3-SLIDER-COMPO
V
vue-3-slider-component
web-frameworkjavascriptv1.0.2
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.

VueSlider
✓ import VueSlider from 'vue-3-slider-component'
✗ import { VueSlider } from 'vue-3-slider-component'
The primary slider component is a default export.
VueSliderProps
✓ import type { VueSliderProps } from 'vue-3-slider-component'
Type definition for the component's props, useful for TypeScript users.
Mark
✓ import type { Mark } from 'vue-3-slider-component'
Type definition for custom slider marks.

This example demonstrates how to set up basic, range, and marked sliders using the Composition API, including reactive values and event handling.

<script setup lang="ts"> import { ref } from "vue"; import VueSlider from "vue-3-slider-component"; const value = ref(0); // Initialize basic slider value const rangeValue = ref([10, 50]); // Example for a range slider const customMarks = ref([0, 25, 50, 75, 100]); // Example for custom marks array const handleSliderChange = (newValue: number | number[]) => { console.log("Slider value changed:", newValue); }; </script> <template> <div class="slider-container"> <h2>Basic Slider</h2> <VueSlider v-model="value" @change="handleSliderChange" :min="0" :max="100" /> <p>Current Value: {{ value }}</p> <h2>Range Slider</h2> <VueSlider v-model="rangeValue" :min="0" :max="100" :enable-cross="false" /> <p>Current Range: {{ rangeValue[0] }} - {{ rangeValue[1] }}</p> <h2>Slider with Custom Marks</h2> <VueSlider v-model="value" :marks="customMarks" :tooltip-formatter="(v) => `${v}%`" /> <p>Value with Marks: {{ value }}</p> </div> </template> <style scoped> .slider-container { max-width: 600px; margin: 20px auto; padding: 20px; border: 1px solid #eee; border-radius: 8px; font-family: sans-serif; } p { margin-top: 10px; font-weight: bold; } </style>
Debug
Known issues
breakingStarting with v1.0.0, the package no longer transpiles code for legacy browsers. If your project needs to support older browsers (e.g., IE11), you must handle transpilation independently within your build process.
fix
Configure your build tools (e.g., Babel, esbuild) to transpile your project's output to target necessary legacy browser environments.
affects: >=1.0.0
gotchaThis component is a fork of an older Vue 2 library. While rewritten for Vue 3, some specifications and API behaviors might differ from the original or other common slider libraries.
fix
Always consult the official Storybook documentation for the most accurate and up-to-date API reference and examples specific to this Vue 3 component.
affects: >=0.1.0
gotchaEarlier versions (prior to 1.0.1) had known issues with ARIA labels, potentially impacting accessibility for screen reader users. Additionally, v1.0.2 fixed native focus and blur events.
fix
Upgrade to the latest stable version (>=1.0.2) to ensure improved accessibility and correct event handling for keyboard navigation.
affects: <1.0.2
Errors
Common errors & fixes
Failed to resolve component: VueSlider
The component was not correctly imported or registered in the Vue application.
fix
Ensure you have `import VueSlider from 'vue-3-slider-component';` at the top of your script and it's either used in a Vue Single File Component's template directly or registered globally/locally in the options API.
Property 'value' was accessed during render but is not defined on instance.
The `v-model` bound property (e.g., `value`) for the slider was not initialized in the component's data or `ref`.
fix
Initialize the `v-model` bound variable with a default value (e.g., `const value = ref(0);` in Composition API or `data() { return { value: 0 }; }` in Options API).
TypeError: Cannot read properties of undefined (reading 'toFixed')
This error can occur if the `tooltipFormatter` prop receives a non-numeric value or an unexpected type, or if a `mark` is improperly defined.
fix
Ensure all slider values and mark definitions are numeric or of the expected type for the formatter. Debug your `v-model` value and `marks` array to ensure data integrity.
Upgrade
Version history
1.0.2latest on npm
Audit
Dependencies
vuerequiredRuntime peer dependency for Vue 3 application
Agent activity
11 hits · last 30 days
node
10
OpenAI (training)
1
Resources
githubhttps://github.com/s-sasaki-0529/vue-slider-component ↗
packagehttps://www.npmjs.com/package/vue-3-slider-component ↗
homepagehttps://vue-3-slider-component.netlify.app/?path=/docs/vue-3-slider-component--vue-3-slider-component ↗
vue-3-slider-component — npm install vue-3-slider-component · libregistry