Package Exports

@vueform/slider

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vueform/slider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue 3 Slider

Slider features

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

Demo

Check out our demo.

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>

Usage with Vue 2

When using with Vue 2 make sure to install @vue/composition-api first and change the imported module to:

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

Support

Join our Discord channel or open an issue.

Basic props

Name	Type	Default	Description
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
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

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

<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

<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

About Vueform

Vueform streamlines the entire form building process in Vue 2 & 3. It comes with 30+ elements, file uploads, element nesting, 50+ validators, conditions, form steps, i18n including reactive configuration, API access, ESM modules and many more. Check out our live demos or see all the features and sign up for beta to get early access.

License

MIT

JSPM

@vueform/slider