Input Range ​

Range input slider.

Usage ​

Simple Usage ​

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

With min, max & step ​

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

Multiple Mode ​

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

Disabled State ​

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

Readonly State ​

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

Binding v-model ​

result:

50

<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]

result:

[
  30,
  70
]

<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

start:

0

end:

100

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

API ​

Props ​

Slots ​

Events ​

See Also ​

• Input
• Strengthbar