1.0.11 • Published 4 years ago
v-range-flyout v1.0.11
v-range-flyout
A vue component that wraps a input type=number with a customizable range slider flyout.
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 inputtype=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.
1.0.2
4 years ago
1.0.11
4 years ago
1.0.10
4 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.2-beta.0
4 years ago
1.0.1
4 years ago
1.0.0-beta.4
4 years ago
1.0.0-beta.3
4 years ago
1.0.0-beta.2
4 years ago
1.0.0-beta.1
4 years ago
0.2.13
5 years ago
0.2.12
5 years ago
0.2.11
5 years ago
0.2.10
5 years ago
0.2.9
5 years ago
0.2.8
5 years ago
0.2.6
5 years ago
0.2.5
5 years ago
0.2.3
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
1.0.0-beta.0
5 years ago
0.1.0
5 years ago
0.0.14
5 years ago
0.0.13
5 years ago
0.0.12
5 years ago
0.0.11
5 years ago
0.0.10
5 years ago
0.0.9
5 years ago
0.0.8
5 years ago
0.0.7
5 years ago
0.0.6
5 years ago
0.0.5
5 years ago
0.0.4
5 years ago
0.0.3
5 years ago
0.0.2
5 years ago
0.0.1
5 years ago