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