Vuersatile Components

Appearance

On this page

InputRange ​

Input date range.

Implements mixins RequiredInputMixin and BasicInputMixin.

Select range
html
<Card>
    <Form>
        <div class="row">
            <div class="col-12 mb-xs-4">
                <InputRange name="range" label="Select range" placeholder="Select range" />
            </div>
        </div>
    </Form>
</Card>

Props ​

  • min (default 0) & max (default 100): minimum and maximum selectable numbers.
0 — 0
html
<Card>
    <Form>
        <div class="row">
            <div class="col-12 mb-xs-4">
                <InputRange name="range" label="Select range" :min="-50" :max="50" />
            </div>
        </div>
    </Form>
</Card>
  • interval (default 1): minimum selectable unit.
0 — 0
html
<Card>
    <Form>
        <div class="row">
            <div class="col-12 mb-xs-4">
                <InputRange name="range" label="Select range" :interval="5" />
            </div>
        </div>
    </Form>
</Card>
  • multiple (default true): wether to select a range or a single unit.
0
html
<Card>
    <Form>
        <div class="row">
            <div class="col-12 mb-xs-4">
                <InputRange name="range" label="Select range" :interval="false" />
            </div>
        </div>
    </Form>
</Card>
  • minRange (default undefined) & maxRange (default undefined): minimum and maximum selectable numbers difference.
0 — 0
html
<Card>
    <Form>
        <div class="row">
            <div class="col-12 mb-xs-4">
                <InputRange name="range" label="Select range" :minRange="5" :maxRange="25" />
            </div>
        </div>
    </Form>
</Card>
  • suffix (default null): number suffix.
0 € — 0 €
html
<Card>
    <Form>
        <div class="row">
            <div class="col-12 mb-xs-4">
                <InputRange name="range" label="Select range" suffix="€" />
            </div>
        </div>
    </Form>
</Card>
  • placeholder (default null): text when no range or number is selected.
Select range
html
<Card>
    <Form>
        <div class="row">
            <div class="col-12 mb-xs-4">
                <InputRange name="range" label="Select range" allowClear placeholder="Select range" />
            </div>
        </div>
    </Form>
</Card>
  • allowClear (default false): wether to allow clear number when selected.
Select range
html
<Card>
    <Form>
        <div class="row">
            <div class="col-12 mb-xs-4">
                <InputRange name="range" label="Select range" allowClear placeholder="Select range" />
            </div>
        </div>
    </Form>
</Card>
  • allowZero (default false): wether to allow zero as a valid selected number.
0 — 0
html
<Card>
    <Form>
        <div class="row">
            <div class="col-12 mb-xs-4">
                <InputRange name="range" label="Select range" allowZero />
            </div>
        </div>
    </Form>
</Card>
  • tooltip (default always): when to show the value tooltip (always, active, focus, hover, none).
0 — 0
html
<Card>
    <Form>
        <div class="row">
            <div class="col-12 mb-xs-4">
                <InputRange name="range" label="Select range" tooltip="hover" />
            </div>
        </div>
    </Form>
</Card>

Emits ​

  • changeField. Custom change event.