el-number-range

Number range input component, first number should be not be bigger than the second.

中文文档

Table of Contents

• Introduction
• Feature
• Demo
• Install
• Example
  • Max
  • Min
• License

Introduction

The number range component is suitable for scenarios which needs set number range via two inputs, such as price range.

⬆Back to Top

Feature

• Automatically range correction
• Support set min and max

⬆Back to Top

Demo

• Doc and online demo

⬆Back to Top

Install

# ensure installed element-ui and registered el-input-number
yarn add element-ui --save

# Step1 install
yarn add @femessage/el-number-range

// Step2 In the required .vue file
<template>
  <el-number-range v-model="range" />
</template>
<script>
import ElNumberRange from '@femessage/el-number-range'
export default {
  components: {
    ElNumberRange
  },
  data() {
    return {
      range: [0, 1000]
    }
  }
}
</script>

⬆Back to Top

Example

Max

Min

⬆Back to Top

Contributors

Thanks goes to these wonderful people (emoji key):

| linrunzheng💻 📖 | EVILLT🚇 | Donald Shen🐛 📖 | levy🚇 👀 | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |