Range Input

The Range Input offers an easy method to aesthetically combine two form controls intended for minimum and maximum values. It includes slots for developers to pass minimum and maximum controls, resulting in a harmoniously styled interface for users.

INFO

The <RangeInput> component provides wrapper style for range inputs. You need to provide 2 slots: "max" and "min" for the wrapper to work. Also, in each slot you can place an instance of Input, DatePicker, Select or any other component that provides data for defining a range.

Basic usage

TCH min

TCH max

<RangeInput>
  <template #min>
    <Input v-model="priceMin" label="TCH min" type="number" />
  </template>
  <template #max>
    <Input v-model="priceMax" label="TCH max" type="number" />
  </template>
</RangeInput>

API

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.

• RangeInput