logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • 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
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Slider

A Slider component for displaying current value and intervals in range.
Importimport { Slider } from "antd";
Sourcecomponents/slider
Docs
Edit this pageChangelog

Resources

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

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

When To Use

To input a value in a range.

Examples

API

Common props ref:Common props

PropertyDescriptionTypeDefaultVersion
autoFocusWhether get focus when component mountedbooleanfalse
classNamesSemantic structure classNameRecord<SemanticDOM, string>-5.10.0
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 step is null but exist marks, the valid point will only be the mark, min and maxnumber | null1
stylesSemantic structure styleRecord<SemanticDOM, React.CSSProperties>-5.10.0
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
onChangeCompleteFire when mouseup or keyup is fired(value) => void-
onChangeCallback function that is fired when the user changes the slider's value(value) => void-

range

PropertyDescriptionTypeDefaultVersion
draggableTrackWhether range track can be dragbooleanfalse-
editableDynamic edit nodes, can't be used with draggableTrackbooleanfalse5.20.0
minCountThe minimum count of nodesnumber05.20.0
maxCountThe maximum count of nodesnumber-5.20.0

tooltip

PropertyDescriptionTypeDefaultVersion
autoAdjustOverflowWhether to automatically adjust the popup positionbooleantrue5.8.0
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

Semantic DOM

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
controlSizeHeight of slidernumber10
dotActiveBorderColorBorder color of dot when activestring#91caff
dotBorderColorBorder color of dotstring#f0f0f0
dotSizeSize of dotnumber8
handleActiveColorBorder color of handle when activestring#1677ff
handleActiveOutlineColorOutline color of handle when activestringrgba(22,119,255,0.2)
handleColorColor of handlestring#91caff
handleColorDisabledColor of handle when disabledstring#bfbfbf
handleLineWidthBorder width of handlestring | number2
handleLineWidthHoverBorder width of handle when hoverstring | number2.5
handleSizeSize of handlenumber10
handleSizeHoverSize of handle when hovernumber12
railBgBackground color of railstringrgba(0,0,0,0.04)
railHoverBgBackground color of rail when hoverstringrgba(0,0,0,0.06)
railSizeHeight of railnumber4
trackBgBackground color of trackstring#91caff
trackBgDisabledBackground color of track when disabledstringrgba(0,0,0,0.04)
trackHoverBgBackground color of track when hoverstring#69b1ff
Global TokenHow to use?
Basic

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Slider with icon

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Event

The onChange callback function will fire when the user changes the slider's value. The onChangeComplete callback function will fire when mouseup or keyup fired.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Vertical

The vertical Slider.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Reverse

Using reverse to render slider reversely.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Multiple handles

Multiple handles combination.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Slider with InputNumber

Synchronize with InputNumber component.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Customize tooltip

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Control visible of ToolTip

When tooltip.open is true, ToolTip will always show, if set to false the ToolTip will not show, even if dragging or hovering.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Draggable track

Make range track draggable by setting range.draggableTrack.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Dynamic edit nodes

Click to add a node, drag out or press the key to delete the node.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.20.0
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
  • root
    5.23.0
    Root element
  • track
    5.10.0
    The selection bar between points and points under the range selection
  • tracks
    5.10.0
    The entire range selection bar under the range selection
  • rail
    5.10.0
    Background rail element
  • handle
    5.10.0
    Grab handle element