v-range-flyout

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

Usage no npm install needed!

<script type="module">
  import vRangeFlyout from 'https://cdn.skypack.dev/v-range-flyout';
</script>

README

v-range-flyout npm version License: MIT

Range Flyout

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

Live Demo

Installation

npm i --save v-range-flyout

Initialize in main.js

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

Options (element attributes)

  • v-model or value : Number - Required. String values will be converted to Number.
  • min: Number - Required
  • max: Number - Required
  • disabled: Boolean - Disable the control
  • sliderHeight: Number - Optionally set the height of the slideable area of the flyout.
  • incr: Number - Optionally set value increment (step attribute in input[type=number]) the control should snap to a multiple of.
  • slideBackground: String - used to show color scales as gradients.
  • inputClass: String - Optional css class to add to the input element
  • flyoutClass: String - Optional wrapper class for the flyout wrapper div

Events

  • @input: Fires on keyboard or slider input
  • @change: Fires when value changes and control is no longer in focus. Returns the numeric value.
  • @active: Fires when flyout is toggled or input changes focus state. A boolean is passed to indicate "active" state.

Usage Examples

<template>
  <div class="wrap">
    <div class="control">
      <label>Choose a value between -50 and 50</label>
      <range-flyout :min="-50" :max="50" v-model="chosenVal"/>
    </div>
    <p>You chose: {{chosenVal}}</p>
  </div>
</template>
<script>
export default {
  data:() => { return {chosenVal:50} }
}
</script>
<style lang="scss">
.wrap{
  .control{
    display: inline-block;
    padding:12px;
    margin-right:50px;
    label{
      display:block;
    }
  }
}
</style>

Disclaimer

This is in active development. Stability not guaranteed. Please file github issues for bugs/features.