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

🎚 A highly customized slider component

English | 简体中文

✨ New Features (v3.x)

• 🔧 Fix exceptions
• 🍖 More customizable
• 👗 Multiple style themes
• 🐳 Support for more sliders
• 📌 Add marks
• 🎉 Support SSR
• 🍒 Support Typescript

🎯 install

$ yarn add vue-slider-component

🚀 Usage

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

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

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

Changelog

Detailed changes for each release are documented in the release notes.

License

MIT

Changelog

v3.0.2

2019-02-28

🎉 Feature

• More customizable (style/slot)
• Multiple style themes
• Support for more sliders (Countless)
• Add marks
• Support SSR
• Support Typescript

🐞 Bug Fixes

• Fix v2.x exception. (No longer need to call refresh)