Range

Range let's the user input a value by dragging a handle. It pairs well with the RangeMeasure component.

Code Example

<Range v-model="value" />

Components

Range is a standalone component. It can pair nicely with RangeMeasure.

Range

Range can be customized with the following props:

Prop	Type	Description
`model-value`	string	Controls the selected state. Use with `v-model`
`min`	number	Sets the minimum value.
`max`	number	Sets the maximum value.
`step`	number	Sets the step interval.
`disabled`	boolean	disables the component
`color`	string	Sets the color to one of the below prop names.
neutral	boolean	Sets the color to neutral.
primary	boolean	Sets the color to primary.
secondary	boolean	Sets the color to secondary.
accent	boolean	Sets the color to accent.
info	boolean	Sets the color to info.
success	boolean	Sets the color to success.
warning	boolean	Sets the color to warning.
error	boolean	Sets the color to error.
`size`	string	Sets the size. Can be set to one of the below size prop names.
`lg`	boolean	Sets the size to `lg`
`md`	boolean	Sets the size to `md` (the default)
`sm`	boolean	Sets the size to `sm`
`xs`	boolean	Sets the size to `xs`

Color

There are two ways of specifying Range color:

The primary, secondary, and accent boolean props.
The color prop, which accepts a string with any of the above prop names.

Code Example

<Range v-model="value" primary />

Size

There are two ways of specifying Range size:

The lg, md, sm, and xs boolean props.
The size prop, which accepts a string with any of the above prop names.

Code Example

<div class="flex-col w-full">
  <Range v-model="value" xs />
  <RangeMeasure xs />
</div>

<div class="flex-col w-full">
  <Range v-model="value" min="10" max="40" />
  <RangeMeasure min="10" max="40" />
</div>

<div class="flex-col w-full">
  <Range v-model="value" min="0" max="10" step="1" />
  <RangeMeasure min="0" max="10" numbered primary />
</div>

Min, Max, and Step

Use the min, max, and step props to determine the starting, ending, and interval values.

Code Example

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <div class="flex-col w-full">
    <Range v-model="value" xs />
    <RangeMeasure v-model="value" xs step="5" />
  </div>
  <div class="flex-col w-full">
    <Range v-model="value" min="10" max="40" />
    <RangeMeasure v-model="value" min="10" max="40" />
  </div>
  <div class="flex-col w-full">
    <Range v-model="value" min="10" max="40" />
    <RangeMeasure v-model="value" min="10" max="40" step="5" numbered as-buttons />
  </div>
  <div class="flex-col w-full">
    <Range v-model="value" min="0" max="20" step="1" />
    <RangeMeasure v-model="value" min="0" max="20" step="2" numbered primary as-buttons />
  </div>
</template>

Prev RadioGroup

Next RangeMeasure