Vue 3 slider Component with Multi Handles & Tooltips

Vueform has launched a new Vue package called Vue 3 slider component. It offers many features like multi handles, tooltips merging, and formatting, etc.
It also provides Tailwind CSS support with Vue 2 and Vue 3. You can see its demo here.

Features

• Vue 2 & 3 support
• 100% coverage
• TypeScript support
• ESM support
• Fully configurable
• Single slider
• Multiple sliders
• Tooltips
• Formatting
• CSS vars support
• Tailwind & utility class support
• Based on noUiSlider

Installation

You can install this package via Npm:

npm install @vueform/slider

Usage with Vue 3

<template>
  <div>
    <Slider v-model="value" />
  </div>
</template>

<script>
  import Slider from '@vueform/slider'

  export default {
    components: {
      Slider,
    },
    data() {
      return {
        value: 20
      }
    }
  }
</script>

<style src="@vueform/slider/themes/default.css"></style>

Usage with Vue 2

When using Vue 2 install @vue/composition-api via npm/yarn first:

npm i @vue/composition-api --save-dev

Then install the plugin for Vue:

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

After that make sure to change the imported Slider module to:

import Slider from '@vueform/slider/dist/slider.vue2.js'

Usage with Nuxt.js

First you need to install @nuxtjs/composition-API:

npm i @nuxtjs/composition-api --save-dev

Then you need to enable it as a module in nuxt.config.js:

{
  buildModules: [
    '@nuxtjs/composition-api'
  ]
}

After that make sure to change the imported module to Vue 2 version of Slider, as Nuxt.js still depends on that:

import Slider from '@vueform/slider/dist/slider.vue2.js'

Examples

• Single slider
• Multiple slider
• Tooltip formatting
• Tooltip mergin
• Vertical slide

Vue 3 Slider also offers many additional props, features, and customization options. If you are interested to know more about this package, You can view its detailed documentation on Github.