Skip to content

NightCatSama/vue-slider-component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

banner

downloads npm-version license

๐ŸŽš A highly customized slider component

English | ็ฎ€ไฝ“ไธญๆ–‡ | ะ ัƒััะบะธะน

๐Ÿ‰ Vue3.x

This is still in beta and may contain unexpected bugs, please use with caution.

install

$ yarn add vue-slider-component@next
# npm install vue-slider-component@next --save

Breaking Changes

โœจ Features

  • ๐Ÿ– More customizable
  • ๐Ÿ‘— Multiple style themes
  • ๐Ÿณ Support for more sliders
  • ๐Ÿ“Œ Add marks
  • ๐ŸŽ‰ Support SSR
  • ๐Ÿ’ Support Typescript

๐Ÿ“š Documentation

Document: https://nightcatsama.github.io/vue-slider-component

Live Demo: https://jsfiddle.net/NightCatSama/2xy72dod/10547/

๐ŸŽฏ install

$ yarn add vue-slider-component
# npm install vue-slider-component --save

๐Ÿš€ Usage

Vue 2
<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>
Vue 3
<template>
  <vue-slider v-model="value" />
</template>

<script setup>
import { reactive, toRefs } from 'vue'
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/antd.css'

export default {
  setup() {
    const data = reactive({ value: 0 })
    return toRefs(data)
  },
}
</script>

Changelog

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

Support

If my code has helped you, please consider buy me a coffee โ˜•.

License

MIT