naive-ui/demo/documentation/components/input/enUS/pair.demo.md

Pairwise Value

<n-input
  pair
  separator="-"
  v-model="value"
  :placeholder="placeholder"
  clearable
  @blur="handleInputBlur"
  @focus="handleInputFocus"
  @change="handleInputChange"
  @input="handleInputInput"
/>

export default {
  data () {
    return {
      placeholder: ['From', 'To'],
      value: ['0', '100']
    }
  },
  methods: {
    handleInputBlur () {
      this.$NMessage.info('Pairwise Value：Blur')
    },
    handleInputFocus () {
      this.$NMessage.info('Pairwise Value：Focus')
    },
    handleInputInput () {
      this.$NMessage.info('Pairwise Value：Input')
    },
    handleInputChange () {
      this.$NMessage.info('Pairwise Value：Change')
    }
  }
}

.n-input {
  margin-bottom: 8px;
}