Slider

A Slider component for displaying current value

  • <Slider> Slide input controls.
  • <RangeSlider> Slide range input controls.

Usage

import { Slider, RangeSlider } from 'rsuite';

Examples

Default

Progress

Graduated

Vertical

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 />);

Disabled

Show value (Controlled)

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>Fixed end value</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);

Custom

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 />);

Size

Props

<Slider>

Property Type (Default) Description
barClassName string A css class to apply to the Bar DOM node
defaultValue number Default value
disabled boolean The disabled of component
graduated boolean Show Ticks
handleClassName string A css class to apply to the Handle node
handleStyle React.CSSProperties A css style to apply to the Handle node
handleTitle React.Node Customizing what is displayed inside a handle
max number(100) Maximum sliding range
min number(0) Minimum value of sliding range
onChange (value: number) => void Callback function that changes data
progress boolean Show sliding progress bar
renderMark (mark: number) => React.Node Customize labels on the render ruler
step number(1) Slide the value of one step
tooltip boolean(true) Whether to show Tooltip when sliding
value number Value (Controlled)
vertical boolean Vertical Slide

<RangeSlider>

Property Type (Default) Description
barClassName string A css class to apply to the Bar DOM node
defaultValue [number,number] Default value
disabled boolean The disabled of component
graduated boolean Show Ticks
handleClassName string A css class to apply to the Handle node
handleStyle React.CSSProperties A css style to apply to the Handle node
handleTitle React.Node Customizing what is displayed inside a handle
max number(100) Maximum sliding range
min number(0) Minimum value of sliding range
onChange (value: [number,number]) => void Callback function that changes data
progress boolean Show sliding progress bar
renderMark (mark: number) => React.Node Customize labels on the render ruler
step number(1) Slide the value of one step
tooltip boolean(true) Whether to show Tooltip when sliding
value [number,number] Value (Controlled)
vertical boolean Vertical Slide