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'

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

<template>
  <form @submit.prevent="">
    <base-range v-model="form.volume" />
  </form>
</template>

Label

Add label to input range

Code

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <form @submit.prevent="">
    <base-range v-model="form.volume" layout="vertical" label="Vertical" />
    <base-range v-model="form.volume" layout="horizontal" label="Horizontal" />
  </form>
</template>

Text

Show value text

Code

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <form @submit.prevent="">
    <base-range 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'

const form = ref({
  volume: 50
})

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

<template>
  <form @submit.prevent="">
    <base-range description="Example Description" v-model="form.volume" label="Volume" />
    <base-range :helpers="['Example Helper']" v-model="form.volume" label="Volume" />
    <base-range 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.
data-testid	string		Testing ID.

Automated Test Guide

If you pass a data-testid to the <base-range> component, it will automatically generate unique data-testid attributes for testing.

Gherkin Scenario

When I change range "speed" into "25"

Step Definition

When('I change range {string} to {string}', (selector: string, value: string) => {
  cy.get(`[data-testid="${selector}"]`).type(value)
})

Code Implementation

<script setup>
import { ref } from 'vue'

const speed = ref(0)
</script>

<template>
  <base-range v-model="speed" data-testid="speed" />
</template>