Mushilu-San UI

Search components

PlaygroundStorybookGitHub
Forms

Slider

Picks a number inside a range by dragging a thumb or using the keyboard.

Selector: mui-slider

Import
import { Slider } from '@mushilu-san/ui/forms';
PreviewCode

Loading example…

Overview

Slider exposes a role="slider" thumb with aria-valuemin, aria-valuemax and aria-valuenow. The value is a two-way value model, and min, max and step set the range.

Arrow keys move by one step, PageUp and PageDown by a larger amount, and Home and End jump to the ends. In RTL the horizontal arrows are reversed.

When to use

  • Choosing a value in a range where the exact number matters less than the rough size, such as volume or price range.
  • Adjusting a setting that the user can see change live.

When not to use

  • An exact number that the user must type. Use an input with type number. Use Input instead.

Guidelines

Do

  • Show the current value next to the slider.
  • Set a step that matches the precision the user needs.

Don't

  • Do not use a slider when the user needs an exact value.
  • Do not hide the thumb label in a way that removes the value for screen readers.

Accessibility

Roles and attributes

ElementRoleNotes
thumbsliderCarries aria-valuemin, aria-valuemax and aria-valuenow. aria-disabled when disabled.

Keyboard

KeysAction
ArrowLeftArrowRight, ArrowUpArrowDownMove one step. Horizontal arrows are reversed in RTL.
PageUpPageDownMove by a larger increment.
HomeEndJump to the minimum and maximum.
  • Name the slider with the label input. It sets the accessible name of the thumb.

API

Slider

Selector: mui-slider

NameTypeDefaultDescription
minnumber0 Lowest value on the slider. Default `0`.
maxnumber100 Highest value on the slider. Default `100`.
stepnumber1 Distance between allowed values. Default `1`.
disabledbooleanfalse Disables the slider. Keyboard and pointer input are ignored. Accepts attribute presence, e.g. <… disabled>.
labelstring | undefined— Accessible name for the thumb. Set it, since `aria-label` on the host does not reach the thumb (#729).
NameTypeDefaultDescription
valuenumber0 Current value. Two-way bindable with `[(value)]`.

CSS parts

  • ::part(fill)
  • ::part(root)
  • ::part(thumb)
  • ::part(track)

Tokens

  • --mui-color-primary
  • --mui-color-border
  • --mui-color-focus-ring
  • --mui-touch-target

Navigation

IntroductionInstallationAll componentsAvatarBadgeButtonDividerIconSpinnerCalendarCheckboxDate pickerForm fieldInputInput groupInput OTPLabelRadioSelectSliderTextareaToggleToggle groupAspect ratioContainerGridResizableScroll areaSidebarSpacerStackBreadcrumbMenubarNav linkNavigation menuPaginationTabsAlertAlert dialogDialogProgressSheetSkeletonToastAccordionCardCarouselChartEmpty stateTableTooltipTypographyBottom sheetFloating action buttonMobile navigationSwipe actionComboboxCommandContext menuDropdown menuHover cardPopover