Vue Slider Input

VueSliderInput is a highly customizable and user-friendly slider component for Vue 3, designed to enhance user experience with interactive and visually appealing sliders. This versatile slider component comes with a tooltip feature, making it ideal for applications requiring precise input and feedback, such as pricing selections, age selection, and more.

✨ Demo

Try the slider out! - vue-slider-input.web.app

✨ Features

• ✨ Tooltip Display: Provides real-time feedback by displaying the current slider value in a tooltip, improving user interaction.
• ✨ Customizable Appearance: Allows you to customize slider colors, tooltip colors, and thumb colors to match your application’s theme.
• ✨ Breakpoints: Optionally display breakpoints along the slider for better user guidance.
• ✨ Flexible Input: Accepts an array of predefined values, perfect for fixed pricing tiers or predefined age ranges.
• ✨ Responsive Design: Ensures smooth performance and visual consistency across various screen sizes and devices.

🎯 install

npm install vue-slider-input --save

🚀 Usage

Import and Use

<script setup lang="ts">
import { ref } from 'vue'
import VueSliderInput from 'vue-slider-input'

const priceOptions = ref(['$0', '$10', '$20', '$30', '$40', '$50'])

const selectedValue = ref<number>(0) // index of selected value

</script>

<template>
    <VueSliderInput 
        :priceInput="priceOptions" 
        v-model="selectedValue"
        :sliderColor="'#FF7582'" 
        :tooltipTextColor="'#FFFFFF'"
        :thumbColor="'#FFFFFF'"
        :showBreakpoints="true" 
        :breakPointColor="'#909cb5'" />
</template>

Customization

prop properties

Name	Type	Default	Description
priceInput	Array<string>	[]	Array of String which would populate the slider.
sliderColor	string	"#4CAF50"	Color of the slider.
tooltipTextColor	string	"#FFFFFF"	Color of the Tooltip text.
tooltipBackgroundColor	string	sliderColor	Background color of the Tooltip.
thumbColor	string	"#FFFFFF"	Color of the Thumb/Handle.
thumbColorInner	string	sliderColor	Color of the dot inside the Thumb/Handle.
showBreakpoints	boolean	false	Whether to show the breakpoints.
breakPointColor	string	"#909cb5"	Color of the breakpoints.

License

[MIT]