Skip to content
On this page

Input Range

Range input slider.

Usage

Simple Usage

preview
vue
<template>
  <p-input-range />
</template>

With min, max & step

preview
vue
<template>
  <p-input-range min="0" max="100" step="25" />
</template>

Multiple Mode

preview
vue
<template>
  <p-input-range multiple />
</template>

Disabled State

preview
vue
<template>
  <p-input-range disabled />
</template>

Readonly State

preview
vue
<template>
  <p-input-range readonly />
</template>

Binding v-model

preview

result:

50
vue
<template>
  <p-input-range v-model="result" />
</template>

v-model in multiple mode

There are 2 ways to use v-model in multiple mode.

1. Using basic v-model

You can use basic v-model to handle multiple range input, The value will be tuple of number, [start, end]

preview

result:

[
  30,
  70
]
vue
<template>
  <p-input-range v-model="result" multiple />
</template>

2. using v-model:start and v-model:end

You can specific binding the value using v-model:start or v-model:end

preview

start:

0

end:

100
vue
<template>
  <p-input-range
    v-model:start="start"
    v-model:end="end"
    multiple />
</template>

API

Props

PropsTypeDefaultDescription
minNumber0Lowest value in range
maxNumber100Highest value in range
stepNumber1Step movement
multipleBooleanfalseEnable multiple mode
disabledBooleanfalseDisabled state
readonlyBooleanfalseReadonly state
errorBooleanfalseError state
modelValueNumber-v-model value
startNumber-v-model:start value
endNumber-v-model:end value

Slots

NameDescription
There no slots here

Events

NameArgumentsDescription
changeNumber | [Number, Number]Event when value changed

See Also

Released under the MIT License.