范围

使用我们的自定义范围输入以获得一致的跨浏览器样式和内置自定义。

概述

使用 <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