Slider

A Slider component for displaying current value and intervals in range.

When To Use#

To input a value in a range.

Examples

Disabled:

Basic slider. When range is true, display as dual thumb mode. When disable is true, the slider will not be interactable.

expand codeexpand code
import { Slider, Switch } from 'antd';

class Demo extends React.Component {
  state = {
    disabled: false,
  };

  handleDisabledChange = disabled => {
    this.setState({ disabled });
  };

  render() {
    const { disabled } = this.state;
    return (
      <>
        <Slider defaultValue={30} disabled={disabled} />
        <Slider range defaultValue={[20, 50]} disabled={disabled} />
        Disabled: <Switch size="small" checked={disabled} onChange={this.handleDisabledChange} />
      </>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

You can add an icon beside the slider to make it meaningful.

expand codeexpand code
import { Slider } from 'antd';
import { FrownOutlined, SmileOutlined } from '@ant-design/icons';

class IconSlider extends React.Component {
  state = {
    value: 0,
  };

  handleChange = value => {
    this.setState({ value });
  };

  render() {
    const { max, min } = this.props;
    const { value } = this.state;
    const mid = ((max - min) / 2).toFixed(5);
    const preColorCls = value >= mid ? '' : 'icon-wrapper-active';
    const nextColorCls = value >= mid ? 'icon-wrapper-active' : '';
    return (
      <div className="icon-wrapper">
        <FrownOutlined className={preColorCls} />
        <Slider {...this.props} onChange={this.handleChange} value={value} />
        <SmileOutlined className={nextColorCls} />
      </div>
    );
  }
}

ReactDOM.render(<IconSlider min={0} max={20} />, mountNode);
.icon-wrapper {
  position: relative;
  padding: 0px 30px;
}

.icon-wrapper .anticon {
  position: absolute;
  top: -2px;
  width: 16px;
  height: 16px;
  color: rgba(0, 0, 0, 0.25);
  font-size: 16px;
  line-height: 1;
}

.icon-wrapper .icon-wrapper-active {
  color: rgba(0, 0, 0, 0.45);
}

.icon-wrapper .anticon:first-child {
  left: 0;
}

.icon-wrapper .anticon:last-child {
  right: 0;
}

The onChange callback function will fire when the user changes the slider's value. The onAfterChange callback function will fire when onmouseup fired.

expand codeexpand code
import { Slider } from 'antd';

function onChange(value) {
  console.log('onChange: ', value);
}

function onAfterChange(value) {
  console.log('onAfterChange: ', value);
}

ReactDOM.render(
  <>
    <Slider defaultValue={30} onChange={onChange} onAfterChange={onAfterChange} />
    <Slider
      range
      step={10}
      defaultValue={[20, 50]}
      onChange={onChange}
      onAfterChange={onAfterChange}
    />
  </>,
  mountNode,
);
0°C26°C37°C100°C

The vertical Slider.

expand codeexpand code
import { Slider } from 'antd';

const style = {
  display: 'inline-block',
  height: 300,
  marginLeft: 70,
};

const marks = {
  0: '0°C',
  26: '26°C',
  37: '37°C',
  100: {
    style: {
      color: '#f50',
    },
    label: <strong>100°C</strong>,
  },
};

ReactDOM.render(
  <>
    <div style={style}>
      <Slider vertical defaultValue={30} />
    </div>
    <div style={style}>
      <Slider vertical range step={10} defaultValue={[20, 50]} />
    </div>
    <div style={style}>
      <Slider vertical range marks={marks} defaultValue={[26, 37]} />
    </div>
  </>,
  mountNode,
);
Reversed:

Using reverse to render slider reversely.

expand codeexpand code
import { Slider, Switch } from 'antd';

class Demo extends React.Component {
  state = {
    reverse: true,
  };

  handleReverseChange = reverse => {
    this.setState({ reverse });
  };

  render() {
    const { reverse } = this.state;
    return (
      <>
        <Slider defaultValue={30} reverse={reverse} />
        <Slider range defaultValue={[20, 50]} reverse={reverse} />
        Reversed: <Switch size="small" checked={reverse} onChange={this.handleReverseChange} />
      </>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

Synchronize with InputNumber component.

expand codeexpand code
import { Slider, InputNumber, Row, Col } from 'antd';

class IntegerStep extends React.Component {
  state = {
    inputValue: 1,
  };

  onChange = value => {
    this.setState({
      inputValue: value,
    });
  };

  render() {
    const { inputValue } = this.state;
    return (
      <Row>
        <Col span={12}>
          <Slider
            min={1}
            max={20}
            onChange={this.onChange}
            value={typeof inputValue === 'number' ? inputValue : 0}
          />
        </Col>
        <Col span={4}>
          <InputNumber
            min={1}
            max={20}
            style={{ margin: '0 16px' }}
            value={inputValue}
            onChange={this.onChange}
          />
        </Col>
      </Row>
    );
  }
}

class DecimalStep extends React.Component {
  state = {
    inputValue: 0,
  };

  onChange = value => {
    if (isNaN(value)) {
      return;
    }
    this.setState({
      inputValue: value,
    });
  };

  render() {
    const { inputValue } = this.state;
    return (
      <Row>
        <Col span={12}>
          <Slider
            min={0}
            max={1}
            onChange={this.onChange}
            value={typeof inputValue === 'number' ? inputValue : 0}
            step={0.01}
          />
        </Col>
        <Col span={4}>
          <InputNumber
            min={0}
            max={1}
            style={{ margin: '0 16px' }}
            step={0.01}
            value={inputValue}
            onChange={this.onChange}
          />
        </Col>
      </Row>
    );
  }
}

ReactDOM.render(
  <div>
    <IntegerStep />
    <DecimalStep />
  </div>,
  mountNode,
);

Use tipFormatter to format content of Tooltip. If tipFormatter is null, hide it.

expand codeexpand code
import { Slider } from 'antd';

function formatter(value) {
  return `${value}%`;
}

ReactDOM.render(
  <>
    <Slider tipFormatter={formatter} />
    <Slider tipFormatter={null} />
  </>,
  mountNode,
);

included=true

0°C26°C37°C100°C
0°C26°C37°C100°C

included=false

0°C26°C37°C100°C

marks & step

0°C26°C37°C100°C

step=null

0°C26°C37°C100°C

Using marks property to mark a graduated slider, use value or defaultValue to specify the position of thumb. When included is false, means that different thumbs are coordinative. when step is null, users can only slide the thumbs onto marks.

expand codeexpand code
import { Slider } from 'antd';

const marks = {
  0: '0°C',
  26: '26°C',
  37: '37°C',
  100: {
    style: {
      color: '#f50',
    },
    label: <strong>100°C</strong>,
  },
};

ReactDOM.render(
  <>
    <h4>included=true</h4>
    <Slider marks={marks} defaultValue={37} />
    <Slider range marks={marks} defaultValue={[26, 37]} />

    <h4>included=false</h4>
    <Slider marks={marks} included={false} defaultValue={37} />

    <h4>marks & step</h4>
    <Slider marks={marks} step={10} defaultValue={37} />

    <h4>step=null</h4>
    <Slider marks={marks} step={null} defaultValue={37} />
  </>,
  mountNode,
);

When tooltipVisible is true, ToolTip will show always, or ToolTip will not show anyway, even if dragging or hovering.

expand codeexpand code
import { Slider } from 'antd';

ReactDOM.render(<Slider defaultValue={30} tooltipVisible />, mountNode);

Make range track draggable when set range.draggableTrack.

expand codeexpand code
import { Slider } from 'antd';

ReactDOM.render(<Slider range={{ draggableTrack: true }} defaultValue={[20, 50]} />, mountNode);

API#

PropertyDescriptionTypeDefaultVersion
autoFocusWhether get focus when component mountedbooleanfalse
defaultValueThe default value of slider. When range is false, use number, otherwise, use [number, number]number | [number, number]0 | [0, 0]
disabledIf true, the slider will not be interactablebooleanfalse
dotsWhether the thumb can drag over tick onlybooleanfalse
getTooltipPopupContainerThe DOM container of the Tooltip, the default behavior is to create a div element in body(triggerNode) => HTMLElement() => document.body
includedMake effect when marks not null, true means containment and false means coordinativebooleantrue
marksTick mark of Slider, type of key must be number, and must in closed interval [min, max], each mark can declare its own styleobject{ number: ReactNode } | { number: { style: CSSProperties, label: ReactNode } }
maxThe maximum value the slider can slide tonumber100
minThe minimum value the slider can slide tonumber0
rangeDual thumb modebooleanfalse
reverseReverse the componentbooleanfalse
stepThe granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When marks no null, step can be nullnumber | null1
tipFormatterSlider will pass its value to tipFormatter, and display its value in Tooltip, and hide Tooltip when return value is nullvalue => ReactNode | nullIDENTITY
tooltipPlacementSet Tooltip display position. Ref Tooltipstring-
tooltipVisibleIf true, Tooltip will show always, or it will not show anyway, even if dragging or hoveringboolean-
valueThe value of slider. When range is false, use number, otherwise, use [number, number]number | [number, number]-
verticalIf true, the slider will be verticalbooleanfalse
onAfterChangeFire when onmouseup is fired(value) => void-
onChangeCallback function that is fired when the user changes the slider's value(value) => void-
trackStyleThe style of slider trackCSSProperties-
handleStyleThe style of slider handleCSSProperties-

range#

PropertyDescriptionTypeDefaultVersion
draggableTrackWhether range track can be dragbooleanfalse4.10.0

Methods#

NameDescriptionVersion
blur()Remove focus
focus()Get focus