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

Live Demo

Install

npm install vue-slider-component

Log

2016/11/11 version 2.x

• 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

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 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 :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>

Use in vue2.x

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>

Use with Browserify (vueify)
Use this little fix:

e.g:

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

Options

Props

Props	Type	Default	Description
direction	String	horizontal	set the direction of the component, optional value: ['horizontal', 'vertical']
event-type	String	auto	the event type, optional value: ['auto', 'touch', 'mouse', 'none']
width	Number[,String(in horizontal)]	150	width of the component
height	Number[,String(in vertical)]	4	height of the component
dot-size	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]
tooltip-dir	String	top(in horizontal)or left(in vertical)	set the direction of the tooltip, optional value: ['top', 'bottom', 'left', 'right']
reverse	Boolean	false	whether the component reverse (such as Right to left, Top to bottom)
value	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
drag-start	Params: context[Object]	Drag the start event
drag-end	Params: context[Object]	Drag the end event

License

The MIT License