Can use the slider in vue1.x and vue2.x. (No longer update vue1.x, but still can be normal use)

Demo

Live Demo

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

npm install vue-slider-component --save

if the component initialization in a v-show="false" / display: none container or use transform / animation / margin to change the location of the 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. using v-if instead of v-show or display: none.
2. use prop show to control display.
3. After the component appears, to call the refresh method.

Example: https://jsfiddle.net/2xy72dod/254/

cd example/

# install dependencies
npm install

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

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

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

<template>
  <div>
    <vue-slider ref="slider" v-model="value"></vue-slider>
  </div>
</template>
<script>
// Used only in vue2.x version
import vueSlider from 'vue-slider-component'
// or
// import vueSlider from 'vue-slider-component/src/vue2-slider.vue'

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

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

prop*: [only support vue2]

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

# When using the template element as a slot, can add special properties scope or slot-scope to get the value.

e.g.

<vue-slider v-model="value">
  <template slot="tooltip" scope="{ value }">
    <div class="diy-tooltip">
      {{ value }}
    </div>
  </template>
</vue-slider>

<!-- In vue2.5 above, please use slot-scope instead of scope -->
<vue-slider v-model="value">
  <div class="diy-tooltip" slot="tooltip" slot-scope="{ value }">
    {{ value }}
  </div>
</vue-slider>

This hack is just to avoid the server side 'document' error when using it with Nuxt.js. Use it if you don't need to have this component rendered on the server side.

1. Install this and add it to the variable components. i.e.

import NoSSR from 'vue-no-ssr'

let components = {
    /**
     * Add No Server Side Render component
     * to make client DOM math the server DOM
     */
    'no-ssr': NoSSR
}

2. In your template, encapsulate 'vue-slider-component' into the 'no-ssr' component to avoid redner the html on the server like this:

<no-ssr>
    <vue-slider ref="slider"></vue-slider>
</no-ssr>

3. Require the library just for client side and add the 'vue-slider-component' component to the template component list

if (process.browser) {
    // in older versions of nuxt, it's process.BROWSER_BUILD
    let VueSlider = require('vue-slider-component')
    components['vue-slider'] = VueSlider
}

4. Apply the components

export default {
    components
}

MIT