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>