vue-double-slider

Custom made range slider with two thumbs for Vue. Create highly customizable double range sliders with ease.

Install

Install with npm:

$ npm install vue-double-slider

Initialization and usage

main.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

<script setup>
import { ref } from 'vue'

const min = ref(10)
const max = ref(20)
</script>

<template>
  <div style="width: 200px;">
    <double-range-slider
      :min="min"
      :max="max"
      :min-threshold="0"
      :max-threshold="100"
      @update:min="value => min = +value"
      @update:max="value => max = +value"
    ></double-range-slider>
    <span>{{ min }} - {{ max }}</span>
  </div>
</template>

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.

Author

Albert Arakelyan

• LinkedIn Profile
• GitHub Profile