vue-slider-component

What is vue-slider-component?

The vue-slider-component is a highly customizable slider component for Vue.js. It allows developers to create sliders with a wide range of features, including custom styles, tooltips, and various configurations for different use cases.

What are vue-slider-component's main functionalities?

Basic Slider

This code demonstrates a basic slider component with a default value of 50. The slider is imported and used within a Vue component.

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

<script>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'

export default {
  components: { VueSlider },
  data() {
    return {
      value: 50
    }
  }
}
</script>

Range Slider

This code demonstrates a range slider with a minimum value of 0, a maximum value of 100, and an interval of 1. The tooltip is always visible, and the initial range is set to [20, 80].

<template>
  <vue-slider v-model="value" :min="0" :max="100" :interval="1" :tooltip="'always'"></vue-slider>
</template>

<script>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'

export default {
  components: { VueSlider },
  data() {
    return {
      value: [20, 80]
    }
  }
}
</script>

Custom Tooltip

This code demonstrates a slider with a custom tooltip formatter. The tooltip always shows and displays the value prefixed with 'Value: '.

<template>
  <vue-slider v-model="value" :tooltip="'always'" :formatter="formatter"></vue-slider>
</template>

<script>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'

export default {
  components: { VueSlider },
  data() {
    return {
      value: 50
    }
  },
  methods: {
    formatter(val) {
      return `Value: ${val}`;
    }
  }
}
</script>

Other packages similar to vue-slider-component

vue-range-component

The vue-range-component is another Vue.js component for creating sliders. It offers similar functionalities such as range selection, custom tooltips, and various configurations. However, it may not be as feature-rich or customizable as vue-slider-component.

vue-slider

The vue-slider package provides a simple and easy-to-use slider component for Vue.js. It supports basic slider functionalities and is suitable for simpler use cases. It may lack some of the advanced customization options available in vue-slider-component.

README

vue-slider-component

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

demo

Install

npm install vue-slider-component

Todo

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

Example

cd vue-slider-component/example

npm install

npm run dev

npm run build

usage

Use in vue1.x

e.g:

<template>
    <div>
        <vue-slider v-ref:slider :val.sync="val" @callback="getValue"></vue-slider>
    </div>
</template>
<script>
import { vueSlider }  from 'vue-slider-component';

new Vue({
  el: '#app',
  components: {
    vueSlider
  },
  data: {
    val: 1
  }
  methods: {
    getValue(val) {
      console.log(val)
    },
    setValue(num) {
      this.val = num
    }
  }
});
</script>

Use in vue2.x
Because```.sync``` was deprecated. Props are now always one-way down. So in order to realize the two-way, Can be set in the @callback

e.g:

<template>
    <div>
        <vue-slider ref="slider" :val="val" @callback="getValue"></vue-slider>
    </div>
</template>
<script>
// import { vue2Slider as vueSlider } from 'vue-sliders-component';
import vueSlider from 'vue-sliders-component/vue2-sliders.vue'

new Vue({
  el: '#app',
  components: {
    vueSlider
  },
  data: {
    val: 1
  }
  methods: {
    getValue(value) {
      /* Two-way */
      this.val = value
    },
    setValue(num) {
      this.val = num
    }
  }
});
</script>

Options

Props

Props	Type	Default	Description
class-name	String	null	the custom class
styles	Object	null	the custom styles
eventType	String	'auto'	the event type, optional value: ['auto', 'touch', 'mouse', 'none']
width	Number,String	150	width of the component
height	Number	4	height of the component
dotSize	Number	15	size of the sliders
min	Number	0	the minimum value
max	Number	100	the maximum value
interval	Number	1	the gap between the values
show	Boolean	true	display of the component
speed	Number	0.5	transition time
disabled	Boolean	false	whether to disable components
piecewise	Boolean	false	display of the piecewise
tooltip	String,Boolean	false	control the tooltip, optional value: ['hover', 'always', false]
val	Number,Array	0	initial value (if the value for the array open range model)
data	Array	null	the custom data

Function

Name	Type	Description
setValue	Params: value[Number, Array]	set value of the component
setIndex	Params: index*[Number]	set index of the component
getValue	Return: value[Number, Array]	get value of the component
getIndex	Return: index*[Number]	get index of the component
refresh	null	Refresh the component

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

Events

Name	Type	Description
callback	Params:value[Number]	values change when the callback function

Slot

default:

<slot name="left">{{ min }}</slot>
<slot name="right">{{ max }}</slot>

custom:

<template>
  <vue-slider ref="slider" :min="minimum" :max="maximum" :val="val" @callback="getValue">
    <p slot="left">${{ minimum }}.00</p>
    <p slot="right">${{ maximum }}.00</p>
    <!-- or -->
    <!--
      <span slot="left"></span>
      <p slot="right">value: {{ val }}</p>
    -->
  </vue-slider>
</template>