@jeremyhamm/vue-slider

A horizontal slide menu for Vue JS 2+
3,328
Install
npm install @jeremyhamm/vue-slider
Latest Version:0.2.0
Vue:2
License:MIT
Last Updated:Nov 20, 2019
Links: npm
Maintainer: jeremyhamm

Vue Slider

A customizable horizontal slide menu for VueJs 2+

Demo Image


Installation

NPM
  npm i @jeremyhamm/vue-slider
Browser
<script src="https://unpkg.com/@jeremyhamm/vue-slider"></script>

Useage

Mount with global
import Vue from 'vue'
import Slider from '@jeremyhamm/vue-slider'

Vue.use(Slider)
Mount with component

import Slider from '@jeremyhamm/vue-slider'

export default {
  components: {
    'slider': Slider
  }
}
Use in component
 <slider :width="300" format="push" direction="left" :opacity="0.15" :links="[{'id': 1, 'text': 'Link 1', 'url': 'https://github.com'}, {'id': 2, 'text': 'Link 2', 'url': 'https://github.com'}]"></slider>
Properties
Name Type Default Options
width Number 300 Menu Width (px)
format String overlay push, full, overlay
direction String left left, right
opacity Number 0 0.00 - 1.00 Representing css opacity
links Array null [{'id': 1, 'text': 'Link 1', 'url': 'https://github.com'}, {'id': 2, 'text': 'Link 2', 'url': 'https://github.com'}]
Styles

All menu styles can be updated in /assets/sass/variables.scss

Related Packages

vue2-datetime-picker

vue2-datetime-picker is a vue2.0 compatible date time picker component. It is a...

1,011 1
vue-slider-component

A highly customized slider component

6,967,752 2,417
vue-3-slider-component

A highly customized slider component for Vue 3

898,495 21
vue-l-carousel

A responsive carousel(namely slider or swiper) component for Vue.js v2.x+.

2,503 55

Version History

Version Released Vue License
0.2.0 ^2.6.10 MIT
0.1.16 ^2.6.6 MIT
0.1.15 ^2.6.6 MIT
0.1.14 ^2.6.6 MIT
0.1.13 ^2.6.6 MIT