Range

Use our custom range inputs for consistent cross-browser styling and built-in customization.

On this page

Overview

Create FormRange component.

The track (the background) and thumb (the value) are both styled to appear the same across browsers.

RangeValue
30
vue
<template>
  <BFormLabel for="customRange1">
    Example range
  </BFormLabel>
  <BFormRange
    id="customRange1"
    v-model="rangeValue"
  />
  <b-dl margin="t-5">
    <b-dt col="sm-3">
      RangeValue
    </b-dt>
    <b-dd col="sm-9">
      {{ rangeValue }}
    </b-dd>
  </b-dl>
</template>
<script setup>
 const rangeValue = ref(30)
</script>

Disabled

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

vue
<template>
  <BFormLabel for="disabledRange">
    Disabled range
  </BFormLabel>
  <BFormRange
    id="disabledRange"
    disabled
  />
</template>

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.

RangeValue
3
vue
<template>
  <BFormLabel for="customRange2">
    Example range
  </BFormLabel>
  <BFormRange
    id="customRange2"
    v-model="rangeValue"
    min="0"
    max="6"
  />
  <b-dl margin="t-5">
    <b-dt col="sm-3">
      RangeValue
    </b-dt>
    <b-dd col="sm-9">
      {{ rangeValue }}
    </b-dd>
  </b-dl>
</template>
<script setup>
 const rangeValue = ref(3)
</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".

vue
<template>
  <BFormLabel for="customRange3">
    Example range
  </BFormLabel>
  <BFormRange
    min="0"
    max="5"
    step="0.5"
    iid="customRange3"
  />
</template>