https://github.com/albertarakelyan/vue-double-slider
Custom made range slider with two thumbs for Vue. Create highly customizable double range sliders with ease.
https://github.com/albertarakelyan/vue-double-slider
inputrange range-slider slider slider-plugin vue vue3
Last synced: 8 days ago
JSON representation
Custom made range slider with two thumbs for Vue. Create highly customizable double range sliders with ease.
- Host: GitHub
- URL: https://github.com/albertarakelyan/vue-double-slider
- Owner: AlbertArakelyan
- Created: 2023-06-17T06:17:01.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-18T10:54:35.000Z (about 3 years ago)
- Last Synced: 2025-09-03T07:44:04.720Z (10 months ago)
- Topics: inputrange, range-slider, slider, slider-plugin, vue, vue3
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/vue-double-slider
- Size: 234 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-double-slider
> Custom made range slider with two thumbs for Vue. Create highly customizable double range sliders with ease.
## Install
Install with [npm](https://www.npmjs.com/):
```sh
$ npm install vue-double-slider
```
## Initialization and usage
main.js
```js
import './assets/main.css'
import 'vue-double-slider/dist/style.css' // Add this line for using styles
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import vueDoubleSlider from 'vue-double-slider' // Add this import for globally using the component
const app = createApp(App) // Add this use for globally using the component
app.use(router)
app.use(vueDoubleSlider)
app.mount('#app')
```
Component.vue
```js
import { ref } from 'vue'
const min = ref(10)
const max = ref(20)
min = +value"
@update:max="value => max = +value"
>
{{ min }} - {{ max }}
```
## About
The Vue Double Slider package provides a customizable range slider component for Vue applications. With two thumbs, you can easily select a range of values. The component offers a wide range of customization options, including appearance, range limits, step size, and event handling.
Contributing
We welcome contributions from the community to enhance the Vue Double Slider package. If you have any bug reports, feature requests, or pull requests, please submit them to our GitHub repository. We appreciate your help in making the package even better.
Motivation
The Vue Double Slider package aims to provide Vue developers with a user-friendly solution for creating double range sliders. Our goal is to simplify the process of adding range selection functionality to Vue projects while offering extensive customization options. With Vue Double Slider, you can easily create and customize double range sliders to meet your specific project requirements.
---
### Author
**Albert Arakelyan**
* [LinkedIn Profile](https://www.linkedin.com/in/albert-arakelyan/)
* [GitHub Profile](https://github.com/ALbert2504)