vue-slider-zkteam v0.0.2

vue-slider-component

Can use the slider in vue1.x and vue2.x

Live Demo

Install

npm install vue-slider-component --save

Update

• Remove class-name & styles (can use vue native props style, class)
• Remove val prop, use v-model set value (Don't need to manually two-way binding)
• Optimize the click range
• No longer update vue1.x, but still can be normal use
• Add lazy prop
• Support array setIndex method parameters
• Support ie 9+
• Add props *-style for the custom style
• Add formatter prop
• Add clickable prop
• tooltipDir and sliderStyle and tooltipStyle prop support type: Array
• Add real-time prop for real-time computing the layout of the components
• Add labels of piecewise, and the style of the corresponding

Todo

• Basis
• Display maximum value & minimum value
• piecewise style
• Compatible with PC and mobile terminal
• Tooltip
• The custom data
• Range
• The vertical component

Example

cd example/

# install dependencies
npm install

# serve with hot reload at localhost:9000
npm run dev

usage

Use in vue1.x

e.g:

<template>
  <div>
    <vue-slider v-ref:slider :value.sync="value"></vue-slider>
  </div>
</template>
<script>
import vueSlider from 'vue-slider-component/src/vue-slider.vue';

new Vue({
  el: '#app',
  components: {
    vueSlider
  },
  data: {
    value: 1
  }
});
</script>

e.g:

<template>
  <div>
    <vue-slider ref="slider" v-model="value"></vue-slider>
  </div>
</template>
<script>
import vueSlider from 'vue-slider-component'

new Vue({
  el: '#app',
  components: {
    vueSlider
  },
  data: {
    value: 1
  }
});
</script>

e.g:

import vueSlider from 'vue-slider-component/src/vue2-slider.vue'

Options

Props

prop*: only support vue2

Function

• index is the index to the array in the custom data model *
• index is equal to (( value - min ) / interval ) in normal mode *

Events

Exceptions

if the component initialization in a v-show="false" / display: none container or use transform / animation to appear component, there may be an exception ( The slider cannot be used, because the component can not initialize the size or slider position ).

The solution: 1. set prop :real-time="true", if the initial value not equal to the minimum, need to call the refresh method 2. using v-if instead of v-show or display: none. 3. use prop show to control display. 4. After the component appears, to call the refresh method.

License

MIT