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 updated in JavaScript.

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

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

Source

Disabled State

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

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

Source

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>

Source

Step Interval

The step attribute defines the interval of the range slider.

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

Source

Tickmarks

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

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

Source

Hide Value Label

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

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

Source

Customize Value Label

The labelFormatter property lets you customize how the value label is displayed. It receives the current range slider value and returns the text 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>

Source

API

Properties

Attribute	Property	Type	Default
	`defaultValue`	`number[]`	`[]`
Specifies the default value. The slider resets to this state when the form is reset. JavaScript only.
	`value`	`number[]`	-
Specifies the slider value as an array. This value is submitted with form data. Note: This value cannot be set initially via an HTML attribute. Use the JavaScript property to change it.
`autofocus`	`autofocus`	`boolean`	`false`
Whether the element is focused when the page loads.
`tabindex`	`tabIndex`	`number`	-
The element's tab order 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 value label.
`disabled`	`disabled`	`boolean`	`false`
Disables the slider.
`form`	`form`	`string`	-
Associates the slider with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the slider uses its parent `<form>`, if any. This lets the slider work with any form in the document, not just the one it is nested in.
`name`	`name`	`string`	`''`
Specifies the slider's name, which is submitted with form data.
	`validity`	`ValidityState`	-
A `ValidityState` object that represents the element's validity states.
	`validationMessage`	`string`	-
Validation message. Empty string when valid.
	`labelFormatter`	`(value: number) => string`	-
Specifies a function to format the tooltip's value. The function receives the slider's value as an argument and should 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 object parameter may include 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 is invalid, it triggers an `invalid` event and returns `false`. If valid, it returns `true`.
`reportValidity`		`boolean`
Checks the validity of the form field. If it is invalid, it triggers an `invalid` event, returns `false`, and displays a validation message. If valid, it returns `true`.
`setCustomValidity`	`message: string`	`void`
Sets a custom error message. If the message is non-empty, the field is considered 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 does not 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`
Value label.
`tickmark`
Tick mark.

Radio

Select

RangeSlider

Usage

Examples

Default Value

Disabled State

Range

Step Interval

Tickmarks

Hide Value Label

Customize Value Label

API

Properties

Methods

Events

CSS Parts