gunjanwaveslider v0.1.5

GunjanWaveSlider

GunjanWaveSlider is a highly customizable Vue.js slider component designed to handle a wide range of use cases. Whether you're dealing with small or large ranges, this slider offers smooth, precise interactions and visually engaging animations. Built with reactivity and flexibility in mind, it can seamlessly integrate into any Vue.js project.

Features

• Dynamic Range Handling: Handles both small and large ranges efficiently by dynamically determining the number of bars based on parent width.
• Configurable Animations: Includes optional animations like smoke or flame effects for transitions.
• Precision Sliding: Ensures every value in the range is accessible, even for large ranges.
• Customizable Styles: Adjust bar height, width, gap, colors, handle size, and position.
• Hover Feedback: Hand cursor appears when hovering over the slider.
• Default Value Support: Set an initial value that reflects the slider's starting position.
• Event-Driven: Emits the current value during sliding for real-time updates.

Installation

Install the package via npm:

npm install gunjanwaveslider

Usage

Basic Example

<template>
  <div>
    <GunjanWaveSlider
      :start="1"
      :end="100"
      :onSlide="handleSlide"
      :defaultValue="50"
      animationType="smoke"
      animationColor="#FFA500"
      :animationDuration="500"
    />
  </div>
</template>

<script setup>
import GunjanWaveSlider from 'gunjan-wave-slider';

const handleSlide = (value) => {
  console.log('Current Slider Value:', value);
};
</script>

Props

Required Props

Optional Props

Events

Example:

const handleSlide = (value) => {
  console.log('Slider Value:', value);
};

Customization

Here are a few examples of how you can customize the slider:

Example: Large Range with Animation

<GunjanWaveSlider
  :start="1"
  :end="5000"
  animationType="flame"
  animationColor="#FF4500"
  :animationDuration="700"
  :barHeight="50"
  :barWidth="3"
  :barGap="4"
/>

Example: Minimalist Design

<GunjanWaveSlider
  :start="0"
  :end="100"
  showPopup="false"
  :barHeight="30"
  :barWidth="1"
  barActiveColor="#4CAF50"
  barInactiveColor="#C8E6C9"
  handleColor="#4CAF50"
/>

CSS Customization

You can further customize the styles by overriding the default classes in your Vue project.

Example:

.slider-handle {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.slider-value {
  border-radius: 10px;
}

Development and Contribution

1. Clone the repository:

   git clone https://github.com/gunjan1sharma/GunjanWaveSlider

2. Install dependencies:

   npm install

3. Start the development server:

   npm run serve

4. Build the package:

   npm run build

Feel free to open issues and submit pull requests for improvements.

License

This project is licensed under the MIT License.

Author

Created with ❤️ by Gunjan Sharma From India. For queries or suggestions, reach out at gunjan.sharmo@gmail.com.

Happy Sliding! 🚀