レンジ

カスタムレンジ入力を使用すると、クロスブラウザで一貫したスタイリングが可能になり、カスタマイズも可能です。

Overview

FormRange コンポーネントを適用します。

track(background) と thumb(value) は、ブラウザ間で同じように表示されるようにスタイリングされています。

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

コンポーネントに disabled というブーリアン属性を追加すると、グレーアウトしたような外観になり、ポインターイベントが削除されます。

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

Min and max

範囲入力には、minとmaxの暗黙の値があり、それぞれ0と100となっています。

これらの値は min と max 属性を使って新たに指定することができます。

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

デフォルトでは、レンジ入力は整数値に “snap” します。これを変更するには、step の値を指定することができます。

以下の例では、step="0.5" を用いてステップ数を 2 倍にしています。

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

See Also