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>

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.

<mdui-range-slider class="example-value"></mdui-range-slider>

<script>
  const slider = document.querySelector(".example-value");
  slider.value = [30, 70];
</script>

Code

Disabled State

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

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

Code

Range

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

<mdui-range-slider min="10" max="20"></mdui-range-slider>

Code

Step Interval

The step attribute defines the interval of the range slider.

<mdui-range-slider step="10"></mdui-range-slider>

Code

Tickmarks

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

<mdui-range-slider tickmarks step="10"></mdui-range-slider>

Code

Hide Tooltip

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

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

Code

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.

<mdui-range-slider class="example-label-formatter"></mdui-range-slider>

<script>
  const slider = document.querySelector(".example-label-formatter");
  slider.labelFormatter = (value) => `${value} hours`;
</script>

Code

API

Properties

Attribute	Property	Type	Default
	`defaultValue`	`number[]`	`[]`
Specifies the default value. Resets to this state when the form is reset. This value can only be set via JavaScript property.
	`value`	`number[]`	-
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.
`autofocus`	`autofocus`	`boolean`	`false`
Determines if the element should be focused when the page loads.
`tabindex`	`tabIndex`	`number`	-
Specifies the order in which the element receives focus when navigating with the Tab key.
`min`	`min`	`number`	`0`
Specifies the minimum value. Default is `0`.
`max`	`max`	`number`	`100`
Specifies the maximum value. Default is `100`.
`step`	`step`	`number`	`1`
Specifies the step interval. Default is `1`.
`tickmarks`	`tickmarks`	`boolean`	`false`
Adds tickmarks to the slider.
`nolabel`	`nolabel`	`boolean`	`false`
Hides the tooltip.
`disabled`	`disabled`	`boolean`	`false`
Disables the slider.
`form`	`form`	`string`	-
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>`.
`name`	`name`	`string`	`''`
Specifies the slider's name, which is submitted with the form data.
	`validity`	`ValidityState`	-
A `ValidityState` object that represents the element's validity states.
	`validationMessage`	`string`	-
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

Name	Parameters	Returns
`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.

Slider

Up Next

List

RangeSlider

Usage

Examples

Default Value

Disabled State

Range

Step Interval

Tickmarks

Hide Tooltip

Modify Tooltip

API

Properties

Methods

Events

CSS Parts