Vue Range Component

Overview

Create custom <input type="range"> controls with <CFormRange>. The track (the background) and thumb (the value) are both styled to appear the same across browsers, and the track fills up to the thumb: the component renders the input inside a .form-range wrapper and writes the fill ratio to --cui-range-fill, which the CSS uses to draw the fill, the tooltip and the tick marks. The fill is a shade lighter than the thumb; :track="false" leaves the track unfilled.

<template>
  <CFormRange id="customRange1" label="Example range" />
</template>

<script setup>
import { CFormRange } from '@coreui/vue'
</script>

For several thumbs on one track, a vertical orientation or ticks that move a thumb when pressed, use <CRangeSlider>, which renders this markup.

Tooltip

Set tooltips to show a tooltip with the value that follows the thumb. It appears while the pointer is over the input, while the thumb is held, and while the input has focus; tooltips="always" keeps it visible at all times. The tooltip is the markup and the look of the tooltip component, and tooltip-class-name adds classes to it, for example a theme-{color}. tooltips-format formats the text, and a string it returns becomes the input’s aria-valuetext.

<template>
  <CFormRange id="rangeTooltip" label="Brightness" :value="60" tooltips />
  <CFormRange
    id="rangeTooltipAlways"
    class="mt-5"
    label="Brightness"
    :value="60"
    tooltips="always"
    :tooltips-format="(value) => `${value}%`"
  />
</template>

<script setup>
import { CFormRange } from '@coreui/vue'
</script>

Tick marks

Pass ticks and the component renders a tick mark for each entry. A number is a bare tick at that value, and an object sets value, label, className and style, so the ticks land on their values even when those are unevenly spaced. A labelled tick is drawn taller than an unlabelled one.

<template>
  <CFormRange
    id="rangeTicks"
    label="Temperature"
    :min="0"
    :max="100"
    :step="25"
    :value="50"
    :ticks="[
      { value: 0, label: 'Cold' },
      25,
      { value: 50, label: 'Mild' },
      75,
      { value: 100, label: 'Hot' },
    ]"
  />
</template>

<script setup>
import { CFormRange } from '@coreui/vue'
</script>

A string, or an object without value, is a label placed by its position in the array, the first at min and the last at max. While the thumb sits on a tick labelled with text, its aria-valuetext adds the label to the value, so a screen reader announces “50, Medium”; with tooltips-format the label follows the formatted text when the two differ.

<template>
  <CFormRange id="rangePriority" label="Priority" :ticks="['Low', 'Medium', 'High']" />
</template>

<script setup>
import { CFormRange } from '@coreui/vue'
</script>

With form field

Wrap the control in <CFormField> to lay it out with its label and description, and to get validation feedback in the right place.

<template>
  <CFormField>
    <CFormLabel for="rangeField">Volume</CFormLabel>
    <CFormRange id="rangeField" />
    <CFormText>Applies to notification sounds only.</CFormText>
  </CFormField>
</template>

<script setup>
import { CFormField, CFormLabel, CFormRange, CFormText } from '@coreui/vue'
</script>

Disabled

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.

<template>
  <CFormRange id="disabledRange" disabled label="Disabled range" />
</template>

<script setup>
import { CFormRange } from '@coreui/vue'
</script>

Min and max

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

<template>
  <CFormRange id="customRange2" label="Example range" :min="0" :max="5" :value="3" />
</template>

<script setup>
import { CFormRange } from '@coreui/vue'
</script>

Steps

By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using :step="0.5".

<template>
  <CFormRange id="customRange3" label="Example range" :min="0" :max="5" :step="0.5" :value="3" />
</template>

<script setup>
import { CFormRange } from '@coreui/vue'
</script>

Inside a <form>, a native reset puts the thumb back on the value the range started with and emits update:modelValue when that moves it; a bound range only asks for its first value there.

API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

• <CFormRange />