Input · Slider
Slider
Selector to quickly select a number or range of values using drag interaction, more intuitive than InputNumber

Demos

How to import

Basic Usage

You can set range={true} to allow slider slide from both sides.

With Input

Synchronize slider with input value.

Tooltip

You can use tipFormatter to format Tooltip content or set tipFormatter={null}to hide Tooltip.

With Tag

Use marks to label measures on sliders.

Segmented Background

To create a slider with segmented background, you could use CSS property linear-gradient for railStyle along with onChange to change background dynamically。

Controlled Component

You can use value along with onChange property if you want to use Slider as a controlled component.

Vertical

API Reference

PropertyInstructionstypeDefaultVersion
aria-labelaria-label used to define a string that labels the current element. Use it in cases where a text label is not visible on the screenstring--
aria-labelledbyaria-labelledby attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labelingstring--
aria-valuetextaria-valuetext used to provide a user-friendly name for the current value of the sliderstring--
defaultValueDefault valuenumber | number[]0-
disabledDisable sliderbooleanfalse-
includedTakes effect when marks is not null, true means containment and false means coordinationbooleantrue-
marksTick mark of Slider, type of key must be number, and must in closed interval [min, max]Record<number, string >--
maxMaximum value of the slider.number100-
minMinimum value of the slider.number0-
railStyleStyle for slide railCSSProperties-0.31.0
rangeToggle whether it is allow to move slider from both sidesbooleanfalse-
showBoundaryToggle whether show max/min value when hoverbooleanfalse-
stepIncrement between successive valuesnumber1-
tipFormatterFormat Tooltip content, by default display current value(value: string | number | boolean | (string | number | boolean)[]) => anyv => v-
tooltipVisibleToggle whether to display tooltip all the timeboolean--
valueSet current value, used in controlled componentnumber | number[]-
verticalToggle whether to display slider verticallybooleanfalse-
verticalReverseVertical but reverse direction >=1.29.0booleanfalse-
onAfterChangeTriggered when onmouseup is invoked, passed in current value as params(value: number | number[]) => void--
onChangeCallback function when slider value changes(value: number | number[]) => void--
getAriaValueTextUsed to provide a user-friendly name for the current value of the slider, important for screen reader users, The parameters value and index are the current slider value, order(value: number, index?: number) => string--

Accessibility

ARIA

  • The element serving as the focusable slider control has role 'slider'.
  • The slider element has the aria-valuenow property set to a decimal value representing the current value of the slider.
  • The slider element has the aria-valuemin property set to a decimal value representing the minimum allowed value of the slider.
  • The slider element has the aria-valuemax property set to a decimal value representing the maximum allowed value of the slider.
  • If the slider is vertically oriented, it has aria-orientation set to vertical.
  • If the value of aria-valuenow is not user-friendly, e.g., the day of the week is represented by a number, support setting API aria-valuetext property to a string that makes the slider value understandable, e.g., "Monday". And you can use API getAriaValueText(value, index) to specify aria-valuetext.
  • Supporting API aria-label aria-labelledby to specify Slider label.

Keyboard and Focus

  • The slider of Slider can get the focus and display the prompt information of the current slider, and this information needs to be read by assistive technology.
  • When the user uses the range API, you can use Tab and Shift + Tab to switch the focus of the left and right sliders.
  • Keyboard users can use Up Arrow or Right Arrow to increase the slider value, Down Arrow or Left Arrow to decrease the slider value.
  • If you want the slider to change more than the step size, Slider supports 10*step changes:
    • Windows users: Page Up for increasing, Page Down for decreasing;
    • Mac users:Fn + Up Arrow for increasing, Fn + Down Arrow for decreasing;
    • When the user uses the range property, the Page Up key of the previous slider is only supported until it meets the next slider, and then using the Page Up key on the previous slider will not respond. The same is true for the latter slider. After encountering, there is no response to the Page Down key.
  • To move the slider to the minimum value of the slider:
    • Windows users: Home;
    • Mac users: Fn + left arrow;
    • When the user uses the range property, the Home(Fn + left arrow) button of the latter slider only supports until it meets the previous slider, and the Home(Fn + left arrow) button is unresponsive after the overlap.
  • To move the slider to the maximum value of the slider:
    • Windows users: End;
    • Mac users: Fn + right arrow;
    • When the user uses the range property, the End(Fn + right arrow) key of the previous slider is only supported until it meets the next slider, and the End(Fn + right arrow) key is unresponsive after the overlap.

Design Tokens

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED