logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.27.5
  • Components Overview
  • Changelog
    v5.27.5
  • 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
When To Use
Examples
Basic
Slider with InputNumber
Slider with icon
Customize tooltip
Event
Graduated slider
Vertical
Control visibility of Tooltip
Reverse
Draggable track
Multiple handles
Dynamic edit nodes
API
range
tooltip
Methods
Semantic DOM
Design Token

Slider

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

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
X
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
WeaveFox logoWeaveFox-AI Development with WeaveFox 🦊
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

When To Use

Used to input a value within a specified range.

Examples

API

Common props ref:Common props

PropertyDescriptionTypeDefaultVersion
autoFocusWhether to get focus when component is mountedbooleanfalse
classNamesSemantic structure classNameRecord<SemanticDOM, string>-5.10.0
defaultValueThe default value of the slider. When range is false, use number, otherwise, use [number, number]number | [number, number]0 | [0, 0]
disabledIf true, the slider will not be interactivebooleanfalse
keyboardSupport using keyboard to move handlersbooleantrue5.2.0+
dotsWhether the thumb can only be dragged to tick marksbooleanfalse
includedTakes effect when marks is not null. True means containment and false means coordinativebooleantrue
marksTick marks of Slider. The type of key must be number, and must be 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
rangeEnable dual thumb mode for range selectionbooleanfalse
reverseReverse the componentbooleanfalse
stepThe granularity the slider can step through values. Must be greater than 0, and be divisible by (max - min). When step is null and marks exist, valid points will only be marks, min and maxnumber | null1
stylesSemantic structure styleRecord<SemanticDOM, React.CSSProperties>-5.10.0
tooltipThe tooltip related 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 draggedbooleanfalse-
editableDynamic edit nodes. Cannot 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 always be visible; if false, it will never be visible, even when 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 the body(triggerNode) => HTMLElement() => document.body4.23.0
formatterSlider will pass its value to formatter, display its value in Tooltip, and hide the Tooltip when the returned 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
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Slider with icon

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

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
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
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Vertical

The vertical Slider.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Reverse

Using reverse to render slider reversely.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Multiple handles

Multiple handles combination.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Slider with InputNumber

Synchronize with InputNumber component.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Customize tooltip

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

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
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
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Control visibility 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
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Draggable track

Make range track draggable by setting range.draggableTrack.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Dynamic edit nodes

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

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
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