Input Range

Range input slider.

Usage

Simple Usage

preview

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

With min, max & step

preview

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

Multiple Mode

preview

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

Disabled State

preview

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

Readonly State

preview

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

Binding v-model

preview

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]

preview

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

preview

start:

0

end:

100

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

API

Props

Props	Type	Default	Description
min	Number	0	Lowest value in range
max	Number	100	Highest value in range
step	Number	1	Step movement
multiple	Boolean	false	Enable multiple mode
disabled	Boolean	false	Disabled state
readonly	Boolean	false	Readonly state
error	Boolean	false	Error state
modelValue	Number	-	v-model value
start	Number	-	v-model:start value
end	Number	-	v-model:end value

Slots

Name	Description
There no slots here

Events

Name	Arguments	Description
change	Number | [Number, Number]	Event when value changed

See Also

• Input
• Strengthbar