Vue Material Slider

A material design slider build with vue. Live demo

Contents

• Vue Material Slider
  • Contents
  • Installation
  • Import
  • Basic slider
  • Range Slider
  • Properties

Installation

npm install vue-material-slider --save

Import

Import and use in vue individually

import Vue from 'vue'
import "vue-material-slider/dist/vue-material-slider.css";
import { Slider, RangeSlider }  from "vue-material-slider";

Install all at once

import 'vue-material-slider/dist/vue-material-slider.css';
import VueMaterialSlider from 'vue-material-slider';
Vue.use(VueMaterialSlider);

Basic slider

Use in your components

<template>
  <vue-material-slider
    :min="10"
    :max="20"
    v-model="value"
  />
</template>

<script>
export default {
  data() {
    return {
      value: 0
    }
  }
}
</script>

Range Slider

<template>
  <vue-material-range-slider v-model="value" />
</template>

<script>
export default {
  data() {
    return {
      // Each array value corresponds to a new thumb
      value: [0, 25, 50]
    }
  }
}
</script>

Properties

| Prop| Type| default| Description | | --- | --- | --- |--- | | min | number | 0 | The minimum value of the slider | | max | number | 100| The maximum value of the slider | | thumbLabel | boolean | false | Whether or not to show the label | | invert | boolean | false| Set to true to reverse the slider | | vertical | boolean | false | Set to true to make the slider vertical | | displayWith| function | null | Function that will be used to format the value before it is displayed in the thumb label. Can be used to format very large number in order for them to fit into the slider thumb. | | disabled | boolean | false| Whether the component is disabled.| | stepSize | number | 1 | The size of each step |