Range

ブラウザ間で統一されたスタイルと組み込みのカスタマイズのために、独自のカスタム範囲入力を使用します。

概要

<FormRange>を使用して、カスタム<input type="range">コントロールを作成します。トラック（背景）と親指（値）はどちらもブラウザ間で同じように見えるようにスタイル付けされています。Firefoxのみが親指の左右からトラックを「塗りつぶす」ことをサポートして、進行状況を視覚的に示す手段として使用できるため、現在はサポートされていません。

結果

ロード中...

ライブエディター

import Form from 'react-bootstrap/Form';

function RangeExample() {
  return (
    <>
      <Form.Label>Range</Form.Label>
      <Form.Range />
    </>
  );
}

export default RangeExample;

import Form from 'react-bootstrap/Form';

function RangeExample() {
  return (
    <>
      <Form.Label>Range</Form.Label>
      <Form.Range />
    </>
  );
}

export default RangeExample;

概要​

API​

FormRange​

概要

API

FormRange