Blog Detail

07

Oct
Vue 3 slider Component with Multi Handles & Tooltips cover image

arrow_back 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

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.

Published at : 07-10-2021

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project