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

| Prop | Type | Description | |----------|--------|------------------------------------------| | start | Number | The starting value of the range. | | end | Number | The ending value of the range. | | onSlide| Function | Callback function triggered on slide. |

Optional Props

| Prop | Type | Default | Description | |--------------------|----------|---------------|-------------| | defaultValue | Number | start | Initial slider position. | | barHeight | Number | 40 | Height of bars. | | barWidth | Number | 2 | Width of bars. | | barGap | Number | 2 | Gap between bars. | | barActiveColor | String | #FFA500 | Color of active bars. | | barInactiveColor | String | #566573 | Color of inactive bars. | | handleWidth | Number | 7 | Width of the slider handle. | | handleHeight | Number | 7 | Height of the slider handle. | | handleColor | String | #F37529 | Color of the slider handle. | | animationType | String | smoke | Type of animation (smoke or flame). | | animationColor | String | #FFA500 | Color of the animation effect. | | animationSize | Number | 20 | Size of the animation effect. | | animationDuration| Number | 500 | Duration of the animation (in ms). | | showPopup | Boolean | true | Whether to show the value popup. | | fontColor | String | #FFFFFF | Color of the popup text. | | fontSize | Number | 14 | Font size of the popup text. | | dropColor | String | #FF5733 | Background color of the popup. | | handleSliderPosition | String | center | Position of the slider handle (center, top, bottom). | | showAnimation | Boolean | true | Toggle for enabling/disabling animations. |

Events

| Event | Description | |----------|--------------------------------------------------| | onSlide| Emits the current slider value during interaction.|

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 [email protected].

Happy Sliding! 🚀