salary-slider

🎚Salary range slider component based on Vuejs.

✨ Features

• Switch toggles between USD and INR.
• Automatic conversion of dot values on toggling between USD and INR.
• Scale changes on toggle.
• Stylish Tooltip.

🎯 Props and Events

There are three props for the component:

• leftptr(Number) : Denotes left dot value.
• righptr(Number) : Denotes right dot value.
• currency(String) : Denotes currency (USD/INR).

And, there are two events:

• changeptr : fired when dot values are changed.
• changecurrency : fired when currency value change by toggling.

🚀 Usage

Download the source code.
cd salary-slider.
Run npm install .
Import SalarySlider from path/to/folder/src/main.

<template>
<div id="app">
 <SalarySlider
   :leftptr="leftptr"
   :rightptr="rightptr"
   :currency="currency"
   @changeptr="changeptr"
   @changecurrency="changecurrency"
 />
</div>
</template>

<script>
import SalarySlider from "salary-slider/src/main";
export default {
name: "app",
components: {
 SalarySlider
},
data() {
 return {
   leftptr: 10,
   rightptr: 100,
   currency: "INR"
 };
},
methods: {
 changeptr(l, r) {
   this.leftptr = l;
   this.rightptr = r;
 },
 changecurrency(newCurrency) {
   this.currency = newCurrency;
 }
}
};
</script>

Todo-List

• Make more generic.
• Publish on npm.

License

MIT