v-range-flyout

A vue component that wraps a input type=number with a customizable range slider flyout.

Installation

npm install --save v-range-flyout;

Initialize in main.js

import rangeFlyout from "v-range-flyout";`
Vue.use(rangeFlyout);`

Options (element attributes)

• val: Number - Required
• min: Number - Required
• max: Number - Required
• sliderHeight: Number - Optionally set the height of the slideable area of the flyout.
• incr: Number - Optionally set value increment the control should snap to a multiple of.
• inputClass: Number - Optional css class to add to the input element
• wrapperClass: Number - Optional wrapper class for the component wrapper div
• flyoutClass: Number - Optional wrapper class for the flyout wrapper div

Usage Examples

<template>
  <div id="app">
    <div class="control">
      <label>-50, 50</label>
      <range-flyout :min="-50" :max="50" :val="20"/>
    </div>
    <div class="control">
      <label>0, 10 (sliderHeight:100)</label>
      <range-flyout :min="0" :max="10" :val="2" :slider-height="100"/>
    </div>
    <div class="control">
      <label>0, 10 (sliderHeight:100, incr:.2)</label>
      <range-flyout :min="0" :max="10" :val="2" :slider-height="100" :incr=".2"/>
    </div>
    <div class="control">
      <label>-500, 1000 (sliderHeight:100)</label>
      <range-flyout :min="-500" :max="1000" :val="-500" :slider-height="100" />
    </div>
    <div class="control">
      <label>-500, 1000 (incr:11)</label>
      <range-flyout :min="-500" :max="1000" :val="-500" :incr="11" />
    </div>
  </div>
</template>

<script>
import rangeFlyout from './components/range-flyout.vue'

export default {
  name: 'app',
  components: { rangeFlyout }
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
  .control{
    display: inline-block;
    padding:12px;
  }
}
</style>

Disclaimer

This is in alpha. I have bugs. For one, there is no event emitter yet :)