RangeSlider

The Range Slider component allows users to select a range from a series of values.

Usage

Import the component:

import 'mdui/components/range-slider.js';

Import the TypeScript type:

import type { RangeSlider } from 'mdui/components/range-slider.js';

Example:

<mdui-range-slider></mdui-range-slider>

Examples

Default Value

The value property represents the current value of the range slider. You can set the range slider's value by updating the value property. Note that the value property is an array and can only be accessed and modified through JavaScript property.

Disabled State

The range slider can be disabled by adding the disabled attribute.

Range

The min and max attributes allow you to set the minimum and maximum values of the range slider.

Step Interval

The step attribute defines the interval of the range slider.

Tickmarks

Tickmarks can be displayed on the range slider by adding the tickmarks attribute.

Hide Tooltip

The tooltip on the range slider can be hidden by adding the nolabel attribute.

Modify Tooltip

The labelFormatter property allows you to customize the display format of the tooltip. This property is a function that takes the current value of the range slider as a parameter and returns the text you want to display.

API

Properties

AttributePropertyReflectTypeDefault
defaultValuenumber[][]

Specifies the default value. Resets to this state when the form is reset. This value can only be set via JavaScript property.

valuenumber[]-

Specifies the slider value in array format. This value is submitted with form data. It can't be set with HTML attributes initially, only via JavaScript property.

autofocusautofocusbooleanfalse

Determines if the element should be focused when the page loads.

tabindextabIndexnumber-

Specifies the order in which the element receives focus when navigating with the Tab key.

minminnumber0

Specifies the minimum value. Default is 0.

maxmaxnumber100

Specifies the maximum value. Default is 100.

stepstepnumber1

Specifies the step interval. Default is 1.

tickmarkstickmarksbooleanfalse

Adds tickmarks to the slider.

nolabelnolabelbooleanfalse

Hides the tooltip.

disableddisabledbooleanfalse

Disables the slider.

formformstring-

Associates the slider with a <form> element. The value should be the id of a <form> in the same document. If not set, the slider is associated with its parent <form>, if any.

This attribute allows slider elements to be associated with <form>s anywhere in the document, not just inside a <form>.

namenamestring''

Specifies the slider's name, which is submitted with the form data.

validityValidityState-

A ValidityState object that represents the element's validity states.

validationMessagestring-

The element's validation message. This is empty if the element meets its constraints.

labelFormatter(value: number) => string-

Specifies a function to format the tooltip's value. The function should take the slider's value as an argument and return a string to display in the tooltip.

Methods

NameParametersReturns
click
void

Simulates a mouse click on the element.

focus
  • options: FocusOptions (Optional)
void

Sets focus on the element. An optional parameter can be an object with a preventScroll property. If preventScroll is set to true, the page will not scroll to bring the focused element into view.

blur
void

Removes focus from the element.

checkValidity
boolean

Checks the validity of the form field. If it's invalid, it triggers an invalid event and returns false. If it's valid, it returns true.

reportValidity
boolean

Checks the validity of the form field. If it's invalid, it triggers an invalid event, returns false, and displays a validation message. If it's valid, it returns true.

setCustomValidity
  • message: string
void

Sets a custom error message. If the text is non-empty, it indicates that the field is invalid.

Events

Name
focus

Emitted when the range slider gains focus.

blur

Emitted when the range slider loses focus.

change

Emitted when the value changes and the range slider loses focus.

input

Emitted when the value changes.

invalid

Emitted when the form control's validity is checked and it doesn't meet the constraints.

CSS Parts

Name
track-inactive

Track for the inactive state.

track-active

Track for the active state.

handle

Handle for interaction.

label

Tooltip text.

tickmark

Tick mark.

MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons