Range

Let the user specify a numeric value which must be no less than a given value, and no more than another given value. The precise value, however, is not considered important. This is typically represented using a slider or dial control rather than a text entry box like the number input type.

Examples

Range

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseRange } from '@point-hub/papp'

const form = ref({
  volume: 50
})
</script>

<template>
  <form @submit.prevent="">
    <component :is="BaseRange" v-model="form.volume" />
  </form>
</template>

Label

Add label to input range

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseRange } from '@point-hub/papp'

const form = ref({
  volume: 50
})
</script>

<template>
  <form @submit.prevent="">
    <component :is="BaseRange" v-model="form.volume" layout="vertical" label="Vertical" />
    <component :is="BaseRange" v-model="form.volume" layout="horizontal" label="Horizontal" />
  </form>
</template>

Text

Show value text

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseRange } from '@point-hub/papp'

const form = ref({
  volume: 50
})
</script>

<template>
  <form @submit.prevent="">
    <component :is="BaseRange" v-model="form.volume" label="Volume" showText />
  </form>
</template>

Helper

Input range helper description, helper message and error message

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseRange } from '@point-hub/papp'

const form = ref({
  volume: 50
})

const errors = ref(['Example Error'])
</script>

<template>
  <form @submit.prevent="">
    <component
      :is="BaseRange"
      description="Example Description"
      v-model="form.volume"
      label="Volume"
    />
    <component :is="BaseRange" :helpers="['Example Helper']" v-model="form.volume" label="Volume" />
    <component :is="BaseRange" v-model:errors="errors" v-model="form.volume" label="Volume" />
  </form>
</template>

Range API

Types

export type BaseFormLayoutType = 'vertical' | 'horizontal'

Props

Name	Type	Default	Description
v-model	string		v-model is required.
v-model:errors	string[]		Input error message.
id	string		Input id.
label	string		Input label.
description	string		Input description.
layout	BaseFormLayoutType	vertical	Input layout.
show-text	boolean	false	Show range value.
disabled	boolean	false	if true range is disabled.
helpers	string[]		Input helper message.