Range Input

Range input component is used for the selection of numeric ranges.

Basic Usage

To start using range input we need to set v-model with value beeing null or [minNumber, maxNumber].

<template>
  <ci-range-input
    v-model="currentValue"
    title="Percentage"
  />
</template>

<script>
export default {
  data() {
    return {
      currentValue: null
    }
  }
}
</script>

Placeholders

Range input supports of custom placeholders. Use placeholders prop to pass array of strings to be used as range input placeholders.

<template>
  <ci-range-input
    v-model="currentValue"
    title="Any"
    :placeholders="['Custom min', 'Custom max']"
  />
</template>

<script>
export default {
  data() {
    return {
      currentValue: null
    }
  }
}
</script>

Sublabels

Range input supports of custom sublabels. Use sublabels prop to pass array of strings to be used as range input sublabels. By default sublabels are ['Min', 'Max'].

<template>
  <ci-range-input
    title="Age"
    v-model="currentValue"
    :sublabels="['Custom min', 'Custom max']"
  />
</template>

<script>
export default {
  data() {
    return {
      currentValue: null
    }
  }
}
</script>

Slots

Range input has one slot for divider. By default divider is - symbol.

<template>
  <ci-range-input
    v-model="currentValue"
    title="Test"
    no-divider
  >
    <template #divider>
      to
    </template>
  </ci-range-input>
</template>

<script>
export default {
  data() {
    return {
      currentValue: null
    }
  }
}
</script>

Events

Event	Arguments	Description
@update	[min, max]	Emitted when range input changes values