logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.3.2
  • Components Overview
  • General
    • Button
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
  • Other
    • Affix
    • App
    • ConfigProvider
    • FloatButton
    • Watermark
When To Use
Examples
Basic
Slider with InputNumber
Slider with icon
Customize tooltip
Event
Graduated slider
Vertical
Control visible of ToolTip
Reverse
Draggable track
API
range
tooltip
Methods

Slider

SelectSwitch

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuqueAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTechMore Products

yuqueYuQue-Document Collaboration Platform
AntVAntV-Data Visualization
EggEgg-Enterprise Node.js Framework
kitchenKitchen-Sketch Toolkit
xtechAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

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

When To Use

To input a value in a range.

Examples

Basic

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

expand codeexpand code
TypeScript
JavaScript
import React, { useState } from 'react';
import { Slider, Switch } from 'antd';

const App: React.FC = () => {
  const [disabled, setDisabled] = useState(false);

  const onChange = (checked: boolean) => {
    setDisabled(checked);
  };

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

export default App;
Slider with icon

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

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

interface IconSliderProps {
  max: number;
  min: number;
}

const IconSlider: React.FC<IconSliderProps> = (props) => {
  const { max, min } = props;
  const [value, setValue] = useState(0);

  const mid = Number(((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 {...props} onChange={setValue} value={value} />
      <SmileOutlined className={nextColorCls} />
    </div>
  );
};

const App: React.FC = () => <IconSlider min={0} max={20} />;

export default App;
.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;
}
Event

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
TypeScript
JavaScript
import React from 'react';
import { Slider } from 'antd';

const onChange = (value: number | [number, number]) => {
  console.log('onChange: ', value);
};

const onAfterChange = (value: number | [number, number]) => {
  console.log('onAfterChange: ', value);
};

const App: React.FC = () => (
  <>
    <Slider defaultValue={30} onChange={onChange} onAfterChange={onAfterChange} />
    <Slider
      range
      step={10}
      defaultValue={[20, 50]}
      onChange={onChange}
      onAfterChange={onAfterChange}
    />
  </>
);

export default App;
Vertical

The vertical Slider.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Slider } from 'antd';
import type { SliderMarks } from 'antd/es/slider';

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

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

const App: React.FC = () => (
  <>
    <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>
  </>
);

export default App;
Reverse

Using reverse to render slider reversely.

expand codeexpand code
TypeScript
JavaScript
import React, { useState } from 'react';
import { Slider, Switch } from 'antd';

const App: React.FC = () => {
  const [reverse, setReverse] = useState(true);

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

export default App;
Slider with InputNumber

Synchronize with InputNumber component.

expand codeexpand code
TypeScript
JavaScript
import React, { useState } from 'react';
import { Col, InputNumber, Row, Slider, Space } from 'antd';

const IntegerStep: React.FC = () => {
  const [inputValue, setInputValue] = useState(1);

  const onChange = (newValue: number) => {
    setInputValue(newValue);
  };

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

const DecimalStep: React.FC = () => {
  const [inputValue, setInputValue] = useState(0);

  const onChange = (value: number) => {
    if (isNaN(value)) {
      return;
    }
    setInputValue(value);
  };

  return (
    <Row>
      <Col span={12}>
        <Slider
          min={0}
          max={1}
          onChange={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={onChange}
        />
      </Col>
    </Row>
  );
};

const App: React.FC = () => (
  <Space style={{ width: '100%' }} direction="vertical">
    <IntegerStep />
    <DecimalStep />
  </Space>
);

export default App;
Customize tooltip

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

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Slider } from 'antd';

const formatter = (value: number) => `${value}%`;

const App: React.FC = () => (
  <>
    <Slider tooltip={{ formatter }} />
    <Slider tooltip={{ formatter: null }} />
  </>
);

export default App;
Graduated slider

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
TypeScript
JavaScript
import React from 'react';
import { Slider } from 'antd';
import type { SliderMarks } from 'antd/es/slider';

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

const App: React.FC = () => (
  <>
    <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} />
  </>
);

export default App;
#components-slider-demo-mark h4 {
  margin: 0 0 16px;
}
#components-slider-demo-mark .ant-slider-with-marks {
  margin-bottom: 44px;
}
Control visible of ToolTip

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

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Slider } from 'antd';

const App: React.FC = () => <Slider defaultValue={30} tooltip={{ open: true }} />;

export default App;
Draggable track

Make range track draggable when set range.draggableTrack.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Slider } from 'antd';

const App: React.FC = () => <Slider range={{ draggableTrack: true }} defaultValue={[20, 50]} />;

export default App;

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 intractablebooleanfalse
keyboardSupport using keyboard to move handlersbooleantrue5.2.0+
dotsWhether the thumb can drag over tick onlybooleanfalse
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
tooltipThe tooltip relate propstooltip-4.23.0
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 track (the active range)CSSProperties-
railStyleThe style of slider rail (the background)CSSProperties-
handleStyleThe style of slider handleCSSProperties-

range

PropertyDescriptionTypeDefaultVersion
draggableTrackWhether range track can be dragbooleanfalse4.10.0

tooltip

PropertyDescriptionTypeDefaultVersion
openIf true, Tooltip will show always, or it will not show anyway, even if dragging or hoveringboolean-4.23.0
placementSet Tooltip display position. Ref Tooltipstring-4.23.0
getPopupContainerThe DOM container of the Tooltip, the default behavior is to create a div element in body(triggerNode) => HTMLElement() => document.body4.23.0
formatterSlider will pass its value to formatter, and display its value in Tooltip, and hide Tooltip when return value is nullvalue => ReactNode | nullIDENTITY4.23.0

Methods

NameDescriptionVersion
blur()Remove focus
focus()Get focus
Disabled:
0°C26°C37°C100°C
Reversed:

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