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	垂直滑动