Slider 滑动输入控件

<Slider> 滑动输入控件。

<RangeSlider> 滑动范围输入控件。

获取组件

import { Slider, RangeSlider } from 'rsuite';

演示

默认

显示进度条

显示刻度

垂直滑动

export const VerticalSlider = () => {
  const style = {
    height: 400
  };
  return (
    <div >
      <Row>
        <Col md={2}>
          <div style={style}>
            <Slider defaultValue={50} vertical />
          </div>
        </Col>

        <Col md={2}>
          <div style={style}>
            <Slider defaultValue={50} vertical progress />
          </div>
        </Col>
        <Col md={2}>
          <div style={style}>
            <RangeSlider defaultValue={[10, 50]} vertical />
          </div>
        </Col>
        <Col md={2}>
          <div style={style}>
            <Slider
              defaultValue={50}
              min={0}
              step={10}
              max={100}
              graduated
              vertical
              progress
            />
          </div>
        </Col>
        <Col md={2}>
          <div style={style}>
            <RangeSlider
              min={0}
              step={10}
              max={100}
              defaultValue={[10, 50]}
              vertical
              graduated
            />
          </div>
        </Col>
        <Col md={2}>
          <div style={style}>
            <Slider
              defaultValue={50}
              min={0}
              step={10}
              max={100}
              graduated
              vertical
              progress
              renderMark={mark => {
                return <span>{mark} °C</span>;
              }}
            />
          </div>
        </Col>
      </Row>
    </div>
  );
};
ReactDOM.render(<VerticalSlider />);

禁用

显示值(受控的)

function Example1() {
  const [value, setValue] = React.useState(0);
  return (
    <Row>
      <Col md={10}>
        <Slider
          progress
          style={{ marginTop: 16 }}
          value={value}
          onChange={value => {
            setValue(value);
          }}
        />
      </Col>
      <Col md={4}>
        <InputNumber
          min={0}
          max={100}
          value={value}
          onChange={value => {
            setValue(value);
          }}
        />
      </Col>
    </Row>
  );
}

function Example2() {
  const [value, setValue] = React.useState([10, 50]);
  return (
    <Row>
      <Col md={10}>
        <RangeSlider
          progress
          style={{ marginTop: 16 }}
          value={value}
          onChange={value => {
            setValue(value);
          }}
        />
      </Col>
      <Col md={8}>
        <InputGroup>
          <InputNumber
            min={0}
            max={100}
            value={value[0]}
            onChange={nextValue => {
              const [start, end] = value;
              if (nextValue > end) {
                return;
              }
              setValue([nextValue, end]);
            }}
          />
          <InputGroup.Addon>to</InputGroup.Addon>
          <InputNumber
            min={0}
            max={100}
            value={value[1]}
            onChange={nextValue => {
              const [start, end] = value;
              if (start > nextValue) {
                return;
              }
              setValue([start, nextValue]);
            }}
          />
        </InputGroup>
      </Col>
    </Row>
  );
}

function Example3() {
  const [value, setValue] = React.useState([10, 100]);
  return (
    <Row>
      <p>固定其中一个选项</p>
      <Col md={10}>
        <RangeSlider
          progress
          style={{ marginTop: 16 }}
          value={value}
          onChange={value => {
            setValue([value[0], 100]);
          }}
        />
      </Col>
      <Col md={8}>
        <InputGroup>
          <InputNumber
            min={0}
            max={100}
            value={value[0]}
            onChange={nextValue => {
              const [start, end] = value;
              if (nextValue > end) {
                return;
              }
              setValue([nextValue, end]);
            }}
          />
          <InputGroup.Addon>to</InputGroup.Addon>
          <InputNumber min={0} max={100} value={value[1]} disabled />
        </InputGroup>
      </Col>
    </Row>
  );
}

const instance = (
  <div>
    <Example1 />
    <hr />
    <Example2 />
    <hr />
    <Example3 />
  </div>
);

ReactDOM.render(instance);

自定义

class CustomSlider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    };
  }
  render() {
    const labels = ['A', 'B', 'C', 'D'];
    const { value } = this.state;
    const handleStyle = {
      color: '#fff',
      fontSize: 12,
      width: 32,
      height: 22
    };

    return (
      <div >
        <div style={{ width: 200, marginLeft: 20 }}>
          <Slider
            min={0}
            max={labels.length - 1}
            value={value}
            className="custom-slider"
            handleStyle={handleStyle}
            graduated
            tooltip={false}
            handleTitle={labels[value]}
            onChange={v => {
              this.setState({ value: v });
            }}
          />
        </div>
      </div>
    );
  }
}
ReactDOM.render(<CustomSlider />);

自定义大小

Props

<Slider>

属性名称 类型(默认值) 描述
barClassName string 应用于滑动条 DOM 节点的 css class
defaultValue number 默认值
disabled boolean 是否禁用
graduated boolean 显示刻度
handleClassName string 应用于手柄 DOM 节点的 css class
handleStyle React.CSSProperties 附加手柄样式
handleTitle React.Node 自定义手柄内显示内容
max number(100) 滑动范围的最大值
min number(0) 滑动范围的最小值
onChange (value: number) => void 数据发生改变的回调函数
progress boolean 显示滑动的进度条
renderMark (mark: number) => React.Node 自定义渲染标尺上的标签
step number(1) 滑动一步的值
tooltip boolean(true) 滑动时候,是否显示 tooltip
value number 值(受控)
vertical boolean 垂直滑动

<RangeSlider>

属性名称 类型(默认值) 描述
barClassName string 应用于滑动条 DOM 节点的 css class
defaultValue [number,number] 默认值
disabled boolean 是否禁用
graduated boolean 显示刻度
handleClassName string 应用于手柄 DOM 节点的 css class
handleStyle React.CSSProperties 附加手柄样式
handleTitle React.Node 自定义手柄内显示内容
max number(100) 滑动范围的最大值
min number(0) 滑动范围的最小值
onChange (value: [number,number]) => void 数据发生改变的回调函数
progress boolean 显示滑动的进度条
renderMark (mark: number) => React.Node 自定义渲染标尺上的标签
step number(1) 滑动一步的值
tooltip boolean(true) 滑动时候,是否显示 tooltip
value [number,number] 值(受控)
vertical boolean 垂直滑动