Slider

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

When To Use

Used to input a value within a specified range.

Examples

• Basic · basic
• Slider with InputNumber · input-number
• Slider with icon · icon-slider
• Customize tooltip · tip-formatter
• Event · event
• Graduated slider · mark
• Vertical · vertical
• Control visibility of Tooltip · show-tooltip
• Reverse · reverse
• Draggable track · draggableTrack
• Multiple handles · multiple
• Dynamic edit nodes · editable
• Disabled per handle · disabled-handle
• Custom semantic dom styling · style-class

API

Common props ref：Common props

range

tooltip

Methods

Semantic DOM

Semantic description source: vendor/components/slider/demo/_semantic.tsx

Design Token

Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.

Declaration source: vendor/components/slider/style/index.ts

import type * as React from 'react';

import type { CSSObject } from '@ant-design/cssinjs';

import { unit } from '@ant-design/cssinjs';

import { FastColor } from '@ant-design/fast-color';

import { resetComponent } from '../../style';

import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';

import { genStyleHooks, mergeToken } from '../../theme/internal';

// Direction naming standard:
// Horizontal base:
// -0-------------
// vertical: part   (水平时，垂直方向命名为 part)
// horizontal: full (水平时，水平方向命名为 full)

export interface ComponentToken {
  /**
   * @desc 滑动输入高度
   * @descEN Height of slider
   */
  controlSize: number;
  /**
   * @desc 轨道高度
   * @descEN Height of rail
   */
  railSize: number;
  /**
   * @desc 滑块尺寸
   * @descEN Size of handle
   */
  handleSize: number;
  /**
   * @desc 滑块尺寸（悬浮态）
   * @descEN Size of handle when hover
   */
  handleSizeHover: number;
  /**
   * @desc 滑块边框宽度
   * @descEN Border width of handle
   */
  handleLineWidth: number | string;
  /**
   * @desc 滑块边框宽度（悬浮态）
   * @descEN Border width of handle when hover
   */
  handleLineWidthHover: number | string;
  /**
   * @desc 滑块圆点尺寸
   * @descEN Size of dot
   */
  dotSize: number;
  /**
   * @desc 轨道背景色
   * @descEN Background color of rail
   */
  railBg: string;
  /**
   * @desc 轨道背景色（悬浮态）
   * @descEN Background color of rail when hover
   */
  railHoverBg: string;
  /**
   * @desc 轨道已覆盖部分背景色
   * @descEN Background color of track
   */
  trackBg: string;
  /**
   * @desc 轨道已覆盖部分背景色（悬浮态）
   * @descEN Background color of track when hover
   */
  trackHoverBg: string;
  /**
   * @desc 滑块颜色
   * @descEN Color of handle
   */
  handleColor: string;
  /**
   * @desc 滑块激活态边框色
   * @descEN Border color of handle when active
   */
  handleActiveColor: string;
  /**
   * @desc 滑块激活态外框色
   * @descEN Outline color of handle when active
   */
  handleActiveOutlineColor: string;
  /**
   * @desc 滑块禁用颜色
   * @descEN Color of handle when disabled
   */
  handleColorDisabled: string;
  /**
   * @desc 圆点边框颜色
   * @descEN Border color of dot
   */
  dotBorderColor: string;
  /**
   * @desc 圆点激活态边框颜色
   * @descEN Border color of dot when active
   */
  dotActiveBorderColor: string;
  /**
   * @desc 轨道禁用态背景色
   * @descEN Background color of track when disabled
   */
  trackBgDisabled: string;
}

interface SliderToken extends FullToken<'Slider'> {
  marginFull: number | string;
  marginPart: number | string;
  marginPartWithMark: number | string;
}

Shared native props

Tips: The following generic properties apply to most antd components; those not supported are described separately.

Install and reproduce an example

npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.

Native type references

The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.

• vendor/components/slider/Context.ts
• vendor/components/slider/SliderTooltip.tsx
• vendor/components/slider/index.tsx
• vendor/components/slider/style/index.ts

Source and license

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.