Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

vue-simple-range-slider

mohamadkhani3.8k1.1.0TypeScript support: included

Change Your numeric value or numeric range value with dragging handles

vue, range-slider, numeric-picker, range-picker, numeric-range-picker, numeric-range, input-element, range-input

readme

vue-simple-range-slider

Change your numeric value or numeric range value with dragging handles

Demo

Features

  • Single value and range slider support
  • Vue3 and Vue2 supports
  • Exponential and linear scale support
  • Keyboard support
  • rtl support

Requires Vue >=3.2.0 or >=2.7.0

Getting Started

npm install vue-simple-range-slider

Or

yarn add vue-simple-range-slider

Example (Vue 3)

<template>
  <div>
    <VueSimpleRangeSlider
      style="width: 300px"
      :min="0"
      :max="1000000"
      exponential
      v-model="state.range"
    >
      <template #prefix="{ value }">$</template>
    </VueSimpleRangeSlider>

    <VueSimpleRangeSlider
      style="width: 300px"
      :min="0"
      :max="20"
      v-model="state.number"
    />

  </div>
</template>
<script>
import VueSimpleRangeSlider from "vue-simple-range-slider";
import "vue-simple-range-slider/css";
import { reactive, defineComponent } from "vue";
export default defineComponent({
  // register the component
  components: { VueSimpleRangeSlider },
  setup() {
    const state = reactive({ range: [20, 1000], number: 10 });
    return { state };
  },
});
</script>

Vue 2

For Vue 2 import the component like this:

import VueSimpleRangeSlider from "vue-simple-range-slider/vue2";
import "vue-simple-range-slider/vue2/css";

Props

Name Type Default
value (vue2) number Or [number,number]
model-value (vue3) number Or [number,number]
min number 0
max number 100
exponential boolean false
bar-color string #bebebe
active-bar-color string #6699ff
keep-just-significant-figures boolean true
significant-figures number 2
popover-content-editable boolean true

Events

Name Type
input (vue2) (number) => void Or ([number,number]) => void
update:model-value (vue3) (number) => void Or ([number,number]) => void

Slots

Name Type
prefix {value: number}
suffix {value: number}
splitter void

changelog

changes log

6.2.0

  • Coerce numbers to strings when passed to semver.coerce()
  • Add rtl option to coerce from right to left

6.1.3

  • Handle X-ranges properly in includePrerelease mode

6.1.2

  • Do not throw when testing invalid version strings

6.1.1

  • Add options support for semver.coerce()
  • Handle undefined version passed to Range.test

6.1.0

  • Add semver.compareBuild function
  • Support * in semver.intersects

6.0

  • Fix intersects logic.

    This is technically a bug fix, but since it is also a change to behavior that may require users updating their code, it is marked as a major version increment.

5.7

  • Add minVersion method

5.6

  • Move boolean loose param to an options object, with backwards-compatibility protection.
  • Add ability to opt out of special prerelease version handling with the includePrerelease option flag.

5.5

  • Add version coercion capabilities

5.4

  • Add intersection checking

5.3

  • Add minSatisfying method

5.2

  • Add prerelease(v) that returns prerelease components

5.1

  • Add Backus-Naur for ranges
  • Remove excessively cute inspection methods

5.0

  • Remove AMD/Browserified build artifacts
  • Fix ltr and gtr when using the * range
  • Fix for range * with a prerelease identifier