Vue 3 slider component with multihandles and formatting

Vue 3 Slider

Vue 3 slider component with multihandles, tooltips merging and formatting.

Slider features

Vue 2 & 3 support
100% coverage
ESM support
Fully configurable
Single slider
Multiple sliders
Tooltips
Formatting

Installation

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>

Using 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'

Using with Nuxt.js

First you need 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'

Support

Join our Discord channel or open an issue.

Basic props

Name	Type	Default	Description
id	`string`	`slider`	The `id` attribute of slider container DOM.
disabled	`boolean`	`false`	Whether the slider should be disabled.
min	`number`	`0`	Minimum value of the slider.
max	`number`	`100`	Maximum value of the slider.
step	`number`	`1`	The jump between intervals. If `-1` it enables fractions (eg. `1.23`).
tooltips	`boolean`	`true`	Whether tooltips should show above handlers.
merge	`number`	`-1`	The step distance between two handles when their tooltips should be merged (when `step` is `-1` then `1` is assumed). Eg: `{ merge: 5, step: 10 }` -> values: `0, <=50` will merge -> values: `0, 60` will not merge `{ merge: 5, step: -1 }` -> values: `0, <=5` will merge -> values: `0, 5.01` will not merge
format	`object\\|function`		Formats the tooltip. It can be either a function that receives a `value` param and expects a string or number as return or an object with the following properties: `prefix` - eg `$` -> `$100` `suffix` - eg `USD` -> `100USD` `decimals` - eg `2` -> `100.00` `thousand` - eg `,` - `1,000`
orientation	`string`	`'horizontal'`	The orientation of the slider. Possible values: `horizontal\|vertical`
height	`string`	`'300px'`	The height of the slider when `orientation` is `vertical`. Can have any valid CSS measure suffix.
direction	`string`	`'ltr'`	The direction of the slider. By default value increases left-to-right and top-to-bottom, which is reversed when using `rtl`. Possible values: `ltr\|rtl`

Events

Event	Attributes	Description
@change	`value`	Emitted when dragging the slider is finished or it's value changed by clicking, keyboard or programmatical set.
@update	`value`	Emitted in the same scenarios as changed, but also when the slider is being dragged.

Single slider

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

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

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

JSFiddle - Example #1

Multiple slider

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

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

  export default {
    components: { Slider },
    data: () => ({
      value: [20, 40]
    })
  }
</script>

JSFiddle - Example #2

Tooltip formatting

<template>
  <Slider
    v-model="value"
    :format="format"
  />
</template>

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

  export default {
    components: { Slider },
    data: () => ({
      value: 20,
      format: function (value) {
        return `€${value}`
      }
    })
  }
</script>

JSFiddle - Example #3

Tooltip merging

<template>
  <Slider
    v-model="value"
    :merge="merge"
    :format="format"
  />
</template>

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

  export default {
    components: { Slider },
    data: () => ({
      value: [20, 30, 40],
      merge: 10,
      format: {
        prefix: '$',
        decimals: 2
      }
    })
  }
</script>

JSFiddle - Example #4

Vertical slider

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

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

  export default {
    components: { Slider },
    data: () => ({
      value: 50,
      orientation: 'vertical',
      direction: 'rtl'
    })
  }
</script>

JSFiddle - Example #5

GitHub

https://github.com/vueform/slider