All Projects → NightCatSama → Vue Slider Component

NightCatSama / Vue Slider Component

Licence: mit
🌡 A highly customized slider component

Programming Languages

typescript
32286 projects
SCSS
7915 projects
Vue
7211 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue Slider Component

range-slider-element
🍬 <range-slider> custom element
Stars: ✭ 45 (-97.91%)
Mutual labels:  range-slider, sliders
Vue Awesome Swiper
🏆 Swiper component for @vuejs
Stars: ✭ 12,072 (+459.41%)
Mutual labels:  slider, vue-component
vue-pattern-input
Use RegExp to limit input
Stars: ✭ 25 (-98.84%)
Mutual labels:  vue-component, vue3
vue-list-picker
Just a simple list picker component made with Vue.js (works with Vue 2 & 3)
Stars: ✭ 14 (-99.35%)
Mutual labels:  vue-component, vue3
Iconpark
🍎Transform an SVG icon into multiple themes, and generate React icons,Vue icons,svg icons
Stars: ✭ 4,924 (+128.17%)
Mutual labels:  vue-component, vue3
vue-histogram-slider
Range slider with histogram for Vue.js
Stars: ✭ 111 (-94.86%)
Mutual labels:  slider, range-slider
range-slider
Customizable slider (range) component for JavaScript with no dependencies
Stars: ✭ 26 (-98.8%)
Mutual labels:  slider, range-slider
React Slider Kit
react-slider-kit is going to be a comprehensive solution to slider feature in react.
Stars: ✭ 219 (-89.85%)
Mutual labels:  slider, range-slider
vui-vc-next
Vue 3 with Vite Playground - Mobile web UI components - (vue3+vite2).
Stars: ✭ 15 (-99.3%)
Mutual labels:  vue-component, vue3
v-bucket
📦 Fast, Simple, and Lightweight State Manager for Vue 3.0 built with composition API, inspired by Vuex.
Stars: ✭ 42 (-98.05%)
Mutual labels:  vue-component, vue3
vue-virtualised
Blazing fast scrolling and updating for any amount of list and hierarchical data.
Stars: ✭ 18 (-99.17%)
Mutual labels:  vue-component, vue3
Vue Slick Carousel
🚥Vue Slick Carousel with True SSR Written for ⚡Faster Luxstay
Stars: ✭ 447 (-79.29%)
Mutual labels:  slider, vue-component
vue-splide
The Splide component for Vue.
Stars: ✭ 257 (-88.09%)
Mutual labels:  slider, vue-component
vue3-carousel
Vue 3 carousel component
Stars: ✭ 379 (-82.44%)
Mutual labels:  slider, vue3
Roundslider
roundSlider - A free jQuery plugin
Stars: ✭ 232 (-89.25%)
Mutual labels:  slider, range-slider
slider
Vue 3 slider component with multihandles, tooltips merging and formatting (+Tailwind CSS support).
Stars: ✭ 162 (-92.49%)
Mutual labels:  range-slider, vue3
Rangeslider.js
🎚 HTML5 input range slider element polyfill
Stars: ✭ 2,153 (-0.23%)
Mutual labels:  range-slider, sliders
Ion.rangeslider
jQuery only range slider
Stars: ✭ 2,494 (+15.57%)
Mutual labels:  slider, range-slider
vue-magnify
vue-magnify / vue放大镜组件
Stars: ✭ 14 (-99.35%)
Mutual labels:  vue-component, vue3
Vue Gallery
📷 Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
Stars: ✭ 405 (-81.23%)
Mutual labels:  slider, vue-component

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

Caution

  • Change data to v-data for now due to a type conflict. (Probably a temporary modification)

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

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

Support

If my code has helped you, please consider buy me a coffee ☕️.

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].