Range | Pear

PRange

PRange is a native range input with numeric v-model values and an optional value readout.

Range

Brightness

Basic range with default min/max.

vue

<p-field label="Brightness" helper="Basic range with default min/max.">
  <p-range v-model="brightness" name="brightness" />
</p-field>

Contrast

Shows the current value.

vue

<p-field label="Contrast" helper="Shows the current value.">
  <p-range
    v-model="contrast"
    name="contrast"
    :min="0"
    :max="100"
    :step="5"
    show-value
  />
</p-field>

Volume

Custom min/max range.

vue

<p-field label="Volume" helper="Custom min/max range.">
  <p-range v-model="volume" name="volume" :min="0" :max="10" :step="1" show-value />
</p-field>

Disabled range

vue

<p-field label="Disabled range" disabled>
  <p-range v-model="disabledRange" name="disabled-range" show-value />
</p-field>

States & Tooltips

Alert volume

That is probably too loud.

vue

<p-field label="Alert volume" error="That is probably too loud.">
  <p-range
    v-model="alertVolume"
    name="alert-volume"
    show-value
    tooltip="Drag to set the alert volume"
    tooltip-placement="bottom"
  />
</p-field>

API

Props

Name	Type	Default	Description
`v-model`	`number`	-	Current range value.
`min`	`number`	0	Native minimum value.
`max`	`number`	100	Native maximum value.
`step`	`number`	1	Native step value.
`showValue`	`boolean`	false	Shows an output element with the current value.
`disabled`	`boolean`	false	Disables the range. Inherits from PField when present.
`invalid`	`boolean`	false	Sets aria-invalid. Inherits from PField when present.
`tooltip`	`string`	-	Optional Pico tooltip content.
`tooltipPlacement`	`PTooltipPlacement`	-	Optional Pico tooltip placement.

Events

Name	Type	Default	Description
`update:modelValue`	`number`	-	Emitted by v-model while the range input changes.