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

Events

Slots

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