Range slider

A range slider selects a low and a high value on one track, such as a price range. The handles stop at each other instead of crossing, and the change mode sets when your page is told the range: on every movement or when a drag ends. Drag the handles below, or tab to them and press the arrow keys.

Reference docs⁠

Blazor

React

Web

Overview

Examples

API

Styling

Accessibility

Choosing sliders and dials⁠

Four components pick a value with a handle the reader drags. Each suits a different job:

Slider: one value picked along a track, such as volume or brightness.
Range slider: a low and a high value on one track, such as a price range.
Dial: one value picked by turning a knob between two stops, such as an oven temperature.
Continuous dial: a knob with no stops that adds up every turn, such as a jog wheel or a fine-tuning control.

One job belongs elsewhere. An exact number the reader knows is a number field.

Built in⁠

Two handles that stop at each other instead of crossing, with min-value-gap keeping a set distance between them (Range and gap).
Value labels over each handle while it is pressed or focused, with labeled (Value labels).
Five change modes that pace the change event, from every movement to a drag's end (Change mode).
Both values submit with a form, under start-name and end-name (Forms).
Arrow, PageUp, PageDown, Home, and End keys on each handle (Keyboard and focus).
A touch target of at least 48 by 48 pixels around each handle, even when the track looks smaller (Pointer and touch).

Using range sliders well⁠

Choose a range slider for a minimum and a maximum; choose a Slider for one value.
Show formatted values, such as currency or units, with start-label and end-label, bound to the values so they follow each move.
Mark the stops with tickmarks set to values, and set step to match, when only a few values make sense.
Leave the touch target at 48 by 48 pixels, and keep other controls clear of it.

These rules follow Material 3 Expressive's guidance for sliders, on material.io.

Size⁠

size sets the track's thickness, from extra-small to extra-large, which is five sizes. Omit it and the range slider takes the size from your style configuration, which is extra-small unless you have changed it. A horizontal track is at least 200 pixels long, whatever the size.

touch-target sets the area a finger can press, which is at least 48 by 48 pixels unless you choose none. overflow lets the target spill past the track, and wrapper makes the element take up the target's space. Omit it and the range slider takes the value from your style configuration, which is overflow unless you have changed it. Pointer and touch says how this measures against WCAG 2.5.8.

Range and gap⁠

min and max set the track's ends, which are 0 and 100 unless you change them, and step sets the distance between values. start-value and end-value place the handles. Omit them and the handles sit a third and two thirds of the way from min to max. PageUp and PageDown move a handle by page-value, which is ten times step unless you set it.

The handles can meet but never cross. min-value-gap keeps them at least that far apart, so a range such as a price band cannot shrink to nothing. Drag the two handles of each slider toward each other.

Value labels⁠

labeled shows a bubble above a handle while it is pressed or focused, and keeps it for a moment after a press ends. The bubble reads the handle's value. start-label and end-label replace that number with fixed text, and the same text becomes the handle's value text for a screen reader.

Fixed text does not follow the value. To show a formatted readout, such as currency or units, write it into the label text, as the third range slider below does.

Orientation⁠

orientation lays the track out horizontally or vertically, and a vertical track is at least 200 pixels tall. Omit it and the track is horizontal. ArrowUp increases a value in both orientations.

Tickmarks⁠

tickmarks chooses the marks along the track. contrast-end-stop is the default and marks the two ends, values adds one mark for every step, and none draws no marks. Both mark styles are ignored while the track-background slot holds content, because your content takes the track's place.

Use values with a step that gives a handful of stops, since a mark for every step of a fine step is a solid line.

Change mode⁠

change-mode sets when the change event fires while a handle moves; the input event fires on every movement in every mode. Omit it and the mode is interaction-ended, which fires when a drag or key press ends, since a drag has an answer only at its end.

immediate fires on every movement. debounced waits for a pause, and throttled fires at intervals, both paced by rate-limit-delay in milliseconds, which is 150 unless you set it. adaptive fires no more often than once per rate-limit-delay, and paces itself against the work in asyncSink, at no more than sink-duty-cycle of the sink's time. Without an asyncSink, adaptive paces as throttled does. Event pacing explains the measurement.

Forms⁠

A range slider in a form submits two entries, the start value under start-name and the end value under end-name. end-name falls back to start-name, and start-name falls back to name, so a range with only name submits both values under it, start first. Reset restores the start-value and end-value attributes.

The preview cannot submit a form, so the submit button reports a saved message instead, and the preset buttons move the start handle. Your own page submits the form as usual.

Disabled⁠

disabled switches both handles off for pointer and keyboard alike. Use it when the range is unavailable. A range slider inside a disabled <fieldset> is disabled too.

Properties⁠

Property	Attribute	Type	Description
`ariaDescribedBy`	`aria-describedby`	`string`	The IDs of the elements that describe the control, space-separated. An element elsewhere on the page is not found.
`ariaDescription`	`aria-description`	`string`	Not announced by assistive technology. `ariaDescribedBy` is no substitute: an ID elsewhere on the page is not found.
`ariaErrorMessage`	`aria-errormessage`	`string`	The ID of the element describing the value's error. Used only while `ariaInvalid` is "true".
`ariaInvalid`	`aria-invalid`	`string`	Whether the control's value is invalid. A screen reader announces it; the control's appearance does not change.
`ariaLabelledBy`	`aria-labelledby`	`string`	The IDs of the elements that label the control, space-separated. An element elsewhere on the page is not found: use `aria-label`.
`asyncSink`		`ValueChangeSink`	The async work, such as a request to a server, that `ChangeEventMode.Adaptive` paces `change` events against: the control asks for the next one only when the last has finished, no faster than `rateLimitDelay`. A slow sink is asked less often, and is not called once per value change. Read the control's value inside it, as a `change` listener would. Ignored in every other mode. See Change mode.
`changeMode`	`change-modedebounced`, `immediate`, `interaction-ended`, `throttled`, `adaptive`	`ChangeEventModeChangeEventMode.Debounced`, `.Immediate`, `.InteractionEnded`, `.Throttled`, `.Adaptive`default `ChangeEventMode.InteractionEnded`	When the control fires `change` while the user is still moving it. `Debounced`, `Throttled` and `Adaptive` are paced by `rateLimitDelay`, which `Adaptive` treats as a target, and `Adaptive` also paces against `asyncSink`. See Change mode.
`disabled`	`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled.
`endAriaLabel`	`end-aria-label`	`string`	The end handle's accessible name. The name read is this text followed by "end".
`endAriaValueText`	`end-aria-valuetext`	`string`	The text a screen reader announces for the end handle's value. Unset, it falls back to `endLabel`, then to the number.
`endLabel`	`end-label`	`string`	Fixed text that replaces the end value's number in its value label. It is also the end handle's accessible name unless `endAriaLabel` is set, and its value text unless `endAriaValueText` is set. It does not follow `endValue`. See Value labels.
`endName`	`end-name`	`string`	The name the ending value submits under. Falls back to `startName`. See Forms.
`endValue`	`end-value`	`number`	The end handle's value. It cannot fall below `startValue` plus `minValueGap`. Unset, it is two thirds of the way from `min` to `max`.An assignment that is not a finite number is ignored, and `endValue` keeps the last valid value it held. Assigning `null` or `undefined` unsets it, restoring the default. See Range and gap.
`form`read-only		`HTMLFormElement`	The form the component belongs to, or `null` when it has none.
`labeled`	`labeled`	`boolean`default `false`	Whether a label with the handle's value appears while the handle is pressed or focused. It stays briefly after a press ends. See Value labels.
`labels`read-only		`NodeList`	The `<label>` elements associated with the element.
`max`	`max`	`number`default `100`	The highest value the range can take. If `min` is not below it, `min` becomes `max` less 1.An assignment that is not a finite number is ignored, and `max` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Range and gap.
`min`	`min`	`number`default `0`	The lowest value the range can take. A minimum that is not below `max` is replaced by `max` less 1.An assignment that is not a finite number is ignored, and `min` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Range and gap.
`minValueGap`	`min-value-gap`	`number`	The least distance between the two handles, in the control's value units. Without it the handles can meet but never cross.An assignment that is not a finite number is ignored, and `minValueGap` keeps the value it already had. Assigning `null` or `undefined` unsets it, removing the gap constraint. See Range and gap.
`name`	`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`orientation`	`orientationhorizontal`, `vertical`	`SliderOrientationSliderOrientation.Horizontal`, `.Vertical`default `SliderOrientation.Horizontal`	Sets whether the slider runs horizontally or vertically. It is at least 200px long either way. See Orientation.
`pageValue`	`page-value`	`number`	How far PageUp and PageDown move the value. Defaults to ten times `step`.An assignment that is not a finite number is ignored, and `pageValue` keeps the value it already had. Assigning `null` or `undefined` unsets it, restoring the default. See Range and gap.
`rateLimitDelay`	`rate-limit-delay`	`number`default `150`	The delay in milliseconds that paces change events in the `Debounced`, `Throttled` and `Adaptive` change modes. Other modes ignore it.An assignment that is not a finite number is ignored, and `rateLimitDelay` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Change mode.
`sinkDutyCycle`	`sink-duty-cycle`	`number`default `1`	The share of the sink's time this control may occupy, above 0 and up to 1, for `ChangeEventMode.Adaptive` only. At 1 the next call goes out as soon as the last one finishes. Lower it when the sink is shared, so one person dragging does not saturate it: at 0.25 the control leaves three quarters of the time idle.An assignment that is not a finite number in `(0, 1]` is ignored, and the property keeps the value it already had. See Change mode.
`size`	`sizeextra-small`, `small`, `medium`, `large`, `extra-large`	`SizeSize.ExtraSmall`, `.Small`, `.Medium`, `.Large`, `.ExtraLarge`default `Size.ExtraSmall`, from the style configuration	Sets how large the component is, from `extra-small` to `extra-large`. A larger size makes it taller. See Size.
`softDisabled`	`soft-disabled`	`boolean`default `false`	Disables the control but keeps it focusable and in the Tab order. It carries `aria-disabled="true"`, and neither the pointer nor the keyboard changes its value. Use it when a disabled control must stay reachable by keyboard and screen reader. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls.
`startAriaLabel`	`start-aria-label`	`string`	The start handle's accessible name. The name read is this text followed by "start".
`startAriaValueText`	`start-aria-valuetext`	`string`	The text a screen reader announces for the start handle's value. Unset, it falls back to `startLabel`, then to the number.
`startLabel`	`start-label`	`string`	Fixed text that replaces the start value's number in its value label. It is also the start handle's accessible name unless `startAriaLabel` is set, and its value text unless `startAriaValueText` is set. It does not follow `startValue`. See Value labels.
`startName`	`start-name`	`string`	The name the starting value submits under. Falls back to `name`, so a range with only `name` submits both values under it, start first. See Forms.
`startValue`	`start-value`	`number`	The start handle's value. It cannot pass `endValue` less `minValueGap`. Unset, it is a third of the way from `min` to `max`.An assignment that is not a finite number is ignored, and `startValue` keeps the last valid value it held. Assigning `null` or `undefined` unsets it, restoring the default. See Range and gap.
`step`	`step`	`number`default `1`	The step between values. Where the control has a range, a step above the range is set to the range, and a step of 0 or less to 1.An assignment that is not a finite number is ignored, and `step` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Range and gap, Tickmarks.
`tickmarks`	`tickmarksnone`, `contrast-end-stop`, `values`	`SliderTickmarkSliderTickmark.None`, `.ContrastEndStop`, `.Values`default `SliderTickmark.ContrastEndStop`	The type of tickmarks to show. Ignored while the `track-background` slot is filled. See Tickmarks.
`touchTarget`	`touch-targetnone`, `overflow`, `wrapper`	`TouchTargetTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.

Slots⁠

Slot	Description
`track-background`	Content that shows through the slider's track in place of its colors. Tickmarks and the end stop are not drawn while it is filled.

Events⁠

Event	Type	Detail	Description
`input`	`RangeTrackControlInputEvent`	`RangeTrackControlInputEventDetail`	Fired during interaction. Its `detail` carries both handle values, as `startValue` and `endValue`. It bubbles and is composed.
`change`	`RangeTrackControlChangeEvent`	`RangeTrackControlChangeEventDetail`	Fired when interaction ends or based on `changeMode`. Its `detail` carries both handle values, as `startValue` and `endValue`. It bubbles.

change fires only when a value differs from the last one sent, and setting start-value or end-value from code fires neither event.

Props⁠

Prop	Type	Description
`ariaDescribedBy`	`string`	The IDs of the elements that describe the control, space-separated. An element elsewhere on the page is not found.
`ariaDescription`	`string`	Not announced by assistive technology. `ariaDescribedBy` is no substitute: an ID elsewhere on the page is not found.
`ariaErrorMessage`	`string`	The ID of the element describing the value's error. Used only while `ariaInvalid` is "true".
`ariaInvalid`	`string`	Whether the control's value is invalid. A screen reader announces it; the control's appearance does not change.
`ariaLabelledBy`	`string`	The IDs of the elements that label the control, space-separated. An element elsewhere on the page is not found: use `aria-label`.
`asyncSink`	`ValueChangeSink`	The async work, such as a request to a server, that `ChangeEventMode.Adaptive` paces `change` events against: the control asks for the next one only when the last has finished, no faster than `rateLimitDelay`. A slow sink is asked less often, and is not called once per value change. Read the control's value inside it, as a `change` listener would. Ignored in every other mode. See Change mode.
`changeMode`	`ChangeEventModeTypeChangeEventMode.Debounced`, `.Immediate`, `.InteractionEnded`, `.Throttled`, `.Adaptive`default `ChangeEventMode.InteractionEnded`	When the control fires `change` while the user is still moving it. `Debounced`, `Throttled` and `Adaptive` are paced by `rateLimitDelay`, which `Adaptive` treats as a target, and `Adaptive` also paces against `asyncSink`. See Change mode.
`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled.
`endAriaLabel`	`string`	The end handle's accessible name. The name read is this text followed by "end".
`endAriaValueText`	`string`	The text a screen reader announces for the end handle's value. Unset, it falls back to `endLabel`, then to the number.
`endLabel`	`string`	Fixed text that replaces the end value's number in its value label. It is also the end handle's accessible name unless `endAriaLabel` is set, and its value text unless `endAriaValueText` is set. It does not follow `endValue`. See Value labels.
`endName`	`string`	The name the ending value submits under. Falls back to `startName`. See Forms.
`endValue`	`number`	The end handle's value. It cannot fall below `startValue` plus `minValueGap`. Unset, it is two thirds of the way from `min` to `max`.An assignment that is not a finite number is ignored, and `endValue` keeps the last valid value it held. Assigning `null` or `undefined` unsets it, restoring the default. See Range and gap.
`form`read-only (ref)	`HTMLFormElement`	The form the component belongs to, or `null` when it has none.
`labeled`	`boolean`default `false`	Whether a label with the handle's value appears while the handle is pressed or focused. It stays briefly after a press ends. See Value labels.
`labels`read-only (ref)	`NodeList`	The `<label>` elements associated with the element.
`max`	`number`default `100`	The highest value the range can take. If `min` is not below it, `min` becomes `max` less 1.An assignment that is not a finite number is ignored, and `max` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Range and gap.
`min`	`number`default `0`	The lowest value the range can take. A minimum that is not below `max` is replaced by `max` less 1.An assignment that is not a finite number is ignored, and `min` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Range and gap.
`minValueGap`	`number`	The least distance between the two handles, in the control's value units. Without it the handles can meet but never cross.An assignment that is not a finite number is ignored, and `minValueGap` keeps the value it already had. Assigning `null` or `undefined` unsets it, removing the gap constraint. See Range and gap.
`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`orientation`	`SliderOrientationTypeSliderOrientation.Horizontal`, `.Vertical`default `SliderOrientation.Horizontal`	Sets whether the slider runs horizontally or vertically. It is at least 200px long either way. See Orientation.
`pageValue`	`number`	How far PageUp and PageDown move the value. Defaults to ten times `step`.An assignment that is not a finite number is ignored, and `pageValue` keeps the value it already had. Assigning `null` or `undefined` unsets it, restoring the default. See Range and gap.
`rateLimitDelay`	`number`default `150`	The delay in milliseconds that paces change events in the `Debounced`, `Throttled` and `Adaptive` change modes. Other modes ignore it.An assignment that is not a finite number is ignored, and `rateLimitDelay` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Change mode.
`sinkDutyCycle`	`number`default `1`	The share of the sink's time this control may occupy, above 0 and up to 1, for `ChangeEventMode.Adaptive` only. At 1 the next call goes out as soon as the last one finishes. Lower it when the sink is shared, so one person dragging does not saturate it: at 0.25 the control leaves three quarters of the time idle.An assignment that is not a finite number in `(0, 1]` is ignored, and the property keeps the value it already had. See Change mode.
`size`	`SizeTypeSize.ExtraSmall`, `.Small`, `.Medium`, `.Large`, `.ExtraLarge`default `Size.ExtraSmall`, from the style configuration	Sets how large the component is, from `extra-small` to `extra-large`. A larger size makes it taller. See Size.
`softDisabled`	`boolean`default `false`	Disables the control but keeps it focusable and in the Tab order. It carries `aria-disabled="true"`, and neither the pointer nor the keyboard changes its value. Use it when a disabled control must stay reachable by keyboard and screen reader. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls.
`startAriaLabel`	`string`	The start handle's accessible name. The name read is this text followed by "start".
`startAriaValueText`	`string`	The text a screen reader announces for the start handle's value. Unset, it falls back to `startLabel`, then to the number.
`startLabel`	`string`	Fixed text that replaces the start value's number in its value label. It is also the start handle's accessible name unless `startAriaLabel` is set, and its value text unless `startAriaValueText` is set. It does not follow `startValue`. See Value labels.
`startName`	`string`	The name the starting value submits under. Falls back to `name`, so a range with only `name` submits both values under it, start first. See Forms.
`startValue`	`number`	The start handle's value. It cannot pass `endValue` less `minValueGap`. Unset, it is a third of the way from `min` to `max`.An assignment that is not a finite number is ignored, and `startValue` keeps the last valid value it held. Assigning `null` or `undefined` unsets it, restoring the default. See Range and gap.
`step`	`number`default `1`	The step between values. Where the control has a range, a step above the range is set to the range, and a step of 0 or less to 1.An assignment that is not a finite number is ignored, and `step` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Range and gap, Tickmarks.
`tickmarks`	`SliderTickmarkTypeSliderTickmark.None`, `.ContrastEndStop`, `.Values`default `SliderTickmark.ContrastEndStop`	The type of tickmarks to show. Ignored while the `slot="track-background"` child is filled. See Tickmarks.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.

Children⁠

Child	Description
a child with `slot="track-background"`	Content that shows through the slider's track in place of its colors. Tickmarks and the end stop are not drawn while it is filled.

Events⁠

Prop	Argument	Description
`onInput`	`RangeTrackControlInputEvent`	Fired during interaction. Its `detail` carries both handle values, as `startValue` and `endValue`. It bubbles and is composed. Its `detail` carries `originalEvent`.
`onChange`	`RangeTrackControlChangeEvent`	Fired when interaction ends or based on `changeMode`. Its `detail` carries both handle values, as `startValue` and `endValue`. It bubbles. Its `detail` carries `originalEvent`.

change fires only when a value differs from the last one sent, and setting start-value or end-value from code fires neither event.

Parameters⁠

Parameter	Type	Description
`AriaDescribedBy`	`string?`	The IDs of the elements that describe the control, space-separated. An element elsewhere on the page is not found.
`AriaDescription`	`string?`	Not announced by assistive technology. `AriaDescribedBy` is no substitute: an ID elsewhere on the page is not found.
`AriaErrorMessage`	`string?`	The ID of the element describing the value's error. Used only while `AriaInvalid` is "true".
`AriaInvalid`	`string?`	Whether the control's value is invalid. A screen reader announces it; the control's appearance does not change.
`AriaLabelledBy`	`string?`	The IDs of the elements that label the control, space-separated. An element elsewhere on the page is not found: use `aria-label`.
`AsyncSink`	`ValueChangeSink?`	The async work, such as a request to a server, that `ChangeEventMode.Adaptive` paces `change` events against: the control asks for the next one only when the last has finished, no faster than `RateLimitDelay`. A slow sink is asked less often, and is not called once per value change. Read the control's value inside it, as a `change` listener would. Ignored in every other mode. See Change mode.
`ChangeMode`	`ChangeEventMode?ChangeEventMode.Debounced`, `.Immediate`, `.InteractionEnded`, `.Throttled`, `.Adaptive`default `ChangeEventMode.InteractionEnded`	When the control fires `change` while the user is still moving it. `Debounced`, `Throttled` and `Adaptive` are paced by `RateLimitDelay`, which `Adaptive` treats as a target, and `Adaptive` also paces against `AsyncSink`. See Change mode.
`Disabled`	`bool?`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled.
`EndAriaLabel`	`string?`	The end handle's accessible name. The name read is this text followed by "end".
`EndAriaValueText`	`string?`	The text a screen reader announces for the end handle's value. Unset, it falls back to `EndLabel`, then to the number.
`EndLabel`	`string?`	Fixed text that replaces the end value's number in its value label. It is also the end handle's accessible name unless `EndAriaLabel` is set, and its value text unless `EndAriaValueText` is set. It does not follow `EndValue`. See Value labels.
`EndName`	`string?`	The name the ending value submits under. Falls back to `StartName`. See Forms.
`EndValue`	`double?`	The end handle's value. It cannot fall below `StartValue` plus `MinValueGap`. Unset, it is two thirds of the way from `Min` to `Max`.An assignment that is not a finite number is ignored, and `EndValue` keeps the last valid value it held. Assigning `null` or `undefined` unsets it, restoring the default. See Range and gap.
`EndValueExpression`	`Expression<Func<double?>>?`	Gets or sets an expression that identifies the bound value.
`Labeled`	`bool?`default `false`	Whether a label with the handle's value appears while the handle is pressed or focused. It stays briefly after a press ends. See Value labels.
`Max`	`double?`default `100`	The highest value the range can take. If `Min` is not below it, `Min` becomes `Max` less 1.An assignment that is not a finite number is ignored, and `Max` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Range and gap.
`Min`	`double?`default `0`	The lowest value the range can take. A minimum that is not below `Max` is replaced by `Max` less 1.An assignment that is not a finite number is ignored, and `Min` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Range and gap.
`MinValueGap`	`double?`	The least distance between the two handles, in the control's value units. Without it the handles can meet but never cross.An assignment that is not a finite number is ignored, and `MinValueGap` keeps the value it already had. Assigning `null` or `undefined` unsets it, removing the gap constraint. See Range and gap.
`Name`	`string?`	The name the element's value is submitted under with its form. See Forms.
`Orientation`	`SliderOrientation?SliderOrientation.Horizontal`, `.Vertical`default `SliderOrientation.Horizontal`	Sets whether the slider runs horizontally or vertically. It is at least 200px long either way. See Orientation.
`PageValue`	`double?`	How far PageUp and PageDown move the value. Defaults to ten times `Step`.An assignment that is not a finite number is ignored, and `PageValue` keeps the value it already had. Assigning `null` or `undefined` unsets it, restoring the default. See Range and gap.
`RateLimitDelay`	`int?`default `150`	The delay in milliseconds that paces change events in the `Debounced`, `Throttled` and `Adaptive` change modes. Other modes ignore it.An assignment that is not a finite number is ignored, and `RateLimitDelay` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Change mode.
`SinkDutyCycle`	`double?`default `1`	The share of the sink's time this control may occupy, above 0 and up to 1, for `ChangeEventMode.Adaptive` only. At 1 the next call goes out as soon as the last one finishes. Lower it when the sink is shared, so one person dragging does not saturate it: at 0.25 the control leaves three quarters of the time idle.An assignment that is not a finite number in `(0, 1]` is ignored, and the property keeps the value it already had. See Change mode.
`Size`	`Size?Size.ExtraSmall`, `.Small`, `.Medium`, `.Large`, `.ExtraLarge`default `Size.ExtraSmall`, from the style configuration	Sets how large the component is, from `extra-small` to `extra-large`. A larger size makes it taller. See Size.
`SoftDisabled`	`bool?`default `false`	Disables the control but keeps it focusable and in the Tab order. It carries `aria-disabled="true"`, and neither the pointer nor the keyboard changes its value. Use it when a disabled control must stay reachable by keyboard and screen reader. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls.
`StartAriaLabel`	`string?`	The start handle's accessible name. The name read is this text followed by "start".
`StartAriaValueText`	`string?`	The text a screen reader announces for the start handle's value. Unset, it falls back to `StartLabel`, then to the number.
`StartLabel`	`string?`	Fixed text that replaces the start value's number in its value label. It is also the start handle's accessible name unless `StartAriaLabel` is set, and its value text unless `StartAriaValueText` is set. It does not follow `StartValue`. See Value labels.
`StartName`	`string?`	The name the starting value submits under. Falls back to `Name`, so a range with only `Name` submits both values under it, start first. See Forms.
`StartValue`	`double?`	The start handle's value. It cannot pass `EndValue` less `MinValueGap`. Unset, it is a third of the way from `Min` to `Max`.An assignment that is not a finite number is ignored, and `StartValue` keeps the last valid value it held. Assigning `null` or `undefined` unsets it, restoring the default. See Range and gap.
`StartValueExpression`	`Expression<Func<double?>>?`	Gets or sets an expression that identifies the bound value.
`Step`	`double?`default `1`	The step between values. Where the control has a range, a step above the range is set to the range, and a step of 0 or less to 1.An assignment that is not a finite number is ignored, and `Step` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Range and gap, Tickmarks.
`Tickmarks`	`SliderTickmark?SliderTickmark.None`, `.ContrastEndStop`, `.Values`default `SliderTickmark.ContrastEndStop`	The type of tickmarks to show. Ignored while the `TrackBackground` render fragment is filled. See Tickmarks.
`TouchTarget`	`TouchTarget?TouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.

Render fragments⁠

Parameter	Type	Description
`TrackBackground`	`RenderFragment?`	Content that shows through the slider's track in place of its colors. Tickmarks and the end stop are not drawn while it is filled.

Event callbacks⁠

Parameter	Type	Description
`OnInput`	`EventCallback<RangeTrackControlInputEventArgs>`	Fired during interaction. Its `detail` carries both handle values, as `StartValue` and `EndValue`. It bubbles and is composed. Its `detail` carries `originalEvent`.
`OnChange`	`EventCallback<RangeTrackControlChangeEventArgs>`	Fired when interaction ends or based on `ChangeMode`. Its `detail` carries both handle values, as `StartValue` and `EndValue`. It bubbles. Its `detail` carries `originalEvent`.

change fires only when a value differs from the last one sent, and setting start-value or end-value from code fires neither event.

Inputs⁠

Input	Type	Description
`ariaDescribedBy`	`string`	The IDs of the elements that describe the control, space-separated. An element elsewhere on the page is not found.
`ariaDescription`	`string`	Not announced by assistive technology. `ariaDescribedBy` is no substitute: an ID elsewhere on the page is not found.
`ariaErrorMessage`	`string`	The ID of the element describing the value's error. Used only while `ariaInvalid` is "true".
`ariaInvalid`	`string`	Whether the control's value is invalid. A screen reader announces it; the control's appearance does not change.
`ariaLabelledBy`	`string`	The IDs of the elements that label the control, space-separated. An element elsewhere on the page is not found: use `aria-label`.
`asyncSink`	`ValueChangeSink`	The async work, such as a request to a server, that `ChangeEventMode.Adaptive` paces `change` events against: the control asks for the next one only when the last has finished, no faster than `rateLimitDelay`. A slow sink is asked less often, and is not called once per value change. Read the control's value inside it, as a `change` listener would. Ignored in every other mode. See Change mode.
`changeMode`	`ChangeEventModeTypeChangeEventMode.Debounced`, `.Immediate`, `.InteractionEnded`, `.Throttled`, `.Adaptive`default `ChangeEventMode.InteractionEnded`	When the control fires `change` while the user is still moving it. `Debounced`, `Throttled` and `Adaptive` are paced by `rateLimitDelay`, which `Adaptive` treats as a target, and `Adaptive` also paces against `asyncSink`. See Change mode.
`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled.
`endAriaLabel`	`string`	The end handle's accessible name. The name read is this text followed by "end".
`endAriaValueText`	`string`	The text a screen reader announces for the end handle's value. Unset, it falls back to `endLabel`, then to the number.
`endLabel`	`string`	Fixed text that replaces the end value's number in its value label. It is also the end handle's accessible name unless `endAriaLabel` is set, and its value text unless `endAriaValueText` is set. It does not follow `endValue`. See Value labels.
`endName`	`string`	The name the ending value submits under. Falls back to `startName`. See Forms.
`endValue`	`number`	The end handle's value. It cannot fall below `startValue` plus `minValueGap`. Unset, it is two thirds of the way from `min` to `max`.An assignment that is not a finite number is ignored, and `endValue` keeps the last valid value it held. Assigning `null` or `undefined` unsets it, restoring the default. See Range and gap.
`labeled`	`boolean`default `false`	Whether a label with the handle's value appears while the handle is pressed or focused. It stays briefly after a press ends. See Value labels.
`max`	`number`default `100`	The highest value the range can take. If `min` is not below it, `min` becomes `max` less 1.An assignment that is not a finite number is ignored, and `max` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Range and gap.
`min`	`number`default `0`	The lowest value the range can take. A minimum that is not below `max` is replaced by `max` less 1.An assignment that is not a finite number is ignored, and `min` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Range and gap.
`minValueGap`	`number`	The least distance between the two handles, in the control's value units. Without it the handles can meet but never cross.An assignment that is not a finite number is ignored, and `minValueGap` keeps the value it already had. Assigning `null` or `undefined` unsets it, removing the gap constraint. See Range and gap.
`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`orientation`	`SliderOrientationTypeSliderOrientation.Horizontal`, `.Vertical`default `SliderOrientation.Horizontal`	Sets whether the slider runs horizontally or vertically. It is at least 200px long either way. See Orientation.
`pageValue`	`number`	How far PageUp and PageDown move the value. Defaults to ten times `step`.An assignment that is not a finite number is ignored, and `pageValue` keeps the value it already had. Assigning `null` or `undefined` unsets it, restoring the default. See Range and gap.
`rateLimitDelay`	`number`default `150`	The delay in milliseconds that paces change events in the `Debounced`, `Throttled` and `Adaptive` change modes. Other modes ignore it.An assignment that is not a finite number is ignored, and `rateLimitDelay` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Change mode.
`sinkDutyCycle`	`number`default `1`	The share of the sink's time this control may occupy, above 0 and up to 1, for `ChangeEventMode.Adaptive` only. At 1 the next call goes out as soon as the last one finishes. Lower it when the sink is shared, so one person dragging does not saturate it: at 0.25 the control leaves three quarters of the time idle.An assignment that is not a finite number in `(0, 1]` is ignored, and the property keeps the value it already had. See Change mode.
`size`	`SizeTypeSize.ExtraSmall`, `.Small`, `.Medium`, `.Large`, `.ExtraLarge`default `Size.ExtraSmall`, from the style configuration	Sets how large the component is, from `extra-small` to `extra-large`. A larger size makes it taller. See Size.
`softDisabled`	`boolean`default `false`	Disables the control but keeps it focusable and in the Tab order. It carries `aria-disabled="true"`, and neither the pointer nor the keyboard changes its value. Use it when a disabled control must stay reachable by keyboard and screen reader. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls.
`startAriaLabel`	`string`	The start handle's accessible name. The name read is this text followed by "start".
`startAriaValueText`	`string`	The text a screen reader announces for the start handle's value. Unset, it falls back to `startLabel`, then to the number.
`startLabel`	`string`	Fixed text that replaces the start value's number in its value label. It is also the start handle's accessible name unless `startAriaLabel` is set, and its value text unless `startAriaValueText` is set. It does not follow `startValue`. See Value labels.
`startName`	`string`	The name the starting value submits under. Falls back to `name`, so a range with only `name` submits both values under it, start first. See Forms.
`startValue`	`number`	The start handle's value. It cannot pass `endValue` less `minValueGap`. Unset, it is a third of the way from `min` to `max`.An assignment that is not a finite number is ignored, and `startValue` keeps the last valid value it held. Assigning `null` or `undefined` unsets it, restoring the default. See Range and gap.
`step`	`number`default `1`	The step between values. Where the control has a range, a step above the range is set to the range, and a step of 0 or less to 1.An assignment that is not a finite number is ignored, and `step` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Range and gap, Tickmarks.
`tickmarks`	`SliderTickmarkTypeSliderTickmark.None`, `.ContrastEndStop`, `.Values`default `SliderTickmark.ContrastEndStop`	The type of tickmarks to show. Ignored while the `track-background` slot is filled. See Tickmarks.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.

Content projection⁠

Content	Description
an element with `slot="track-background"`	Content that shows through the slider's track in place of its colors. Tickmarks and the end stop are not drawn while it is filled.

Outputs⁠

Output	Event	Description
`cwInput`	`RangeTrackControlInputEvent`	Fired during interaction. Its `detail` carries both handle values, as `startValue` and `endValue`. It bubbles and is composed. Its `detail` carries `originalEvent`.
`cwChange`	`RangeTrackControlChangeEvent`	Fired when interaction ends or based on `changeMode`. Its `detail` carries both handle values, as `startValue` and `endValue`. It bubbles. Its `detail` carries `originalEvent`.

change fires only when a value differs from the last one sent, and setting start-value or end-value from code fires neither event.

Props⁠

Prop	Type	Description
`ariaDescribedBy`	`string`	The IDs of the elements that describe the control, space-separated. An element elsewhere on the page is not found.
`ariaDescription`	`string`	Not announced by assistive technology. `ariaDescribedBy` is no substitute: an ID elsewhere on the page is not found.
`ariaErrorMessage`	`string`	The ID of the element describing the value's error. Used only while `ariaInvalid` is "true".
`ariaInvalid`	`string`	Whether the control's value is invalid. A screen reader announces it; the control's appearance does not change.
`ariaLabelledBy`	`string`	The IDs of the elements that label the control, space-separated. An element elsewhere on the page is not found: use `aria-label`.
`asyncSink`	`ValueChangeSink`	The async work, such as a request to a server, that `ChangeEventMode.Adaptive` paces `change` events against: the control asks for the next one only when the last has finished, no faster than `rateLimitDelay`. A slow sink is asked less often, and is not called once per value change. Read the control's value inside it, as a `change` listener would. Ignored in every other mode. See Change mode.
`changeMode`	`ChangeEventModeTypeChangeEventMode.Debounced`, `.Immediate`, `.InteractionEnded`, `.Throttled`, `.Adaptive`default `ChangeEventMode.InteractionEnded`	When the control fires `change` while the user is still moving it. `Debounced`, `Throttled` and `Adaptive` are paced by `rateLimitDelay`, which `Adaptive` treats as a target, and `Adaptive` also paces against `asyncSink`. See Change mode.
`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled.
`endAriaLabel`	`string`	The end handle's accessible name. The name read is this text followed by "end".
`endAriaValueText`	`string`	The text a screen reader announces for the end handle's value. Unset, it falls back to `endLabel`, then to the number.
`endLabel`	`string`	Fixed text that replaces the end value's number in its value label. It is also the end handle's accessible name unless `endAriaLabel` is set, and its value text unless `endAriaValueText` is set. It does not follow `endValue`. See Value labels.
`endName`	`string`	The name the ending value submits under. Falls back to `startName`. See Forms.
`endValue`	`number`	The end handle's value. It cannot fall below `startValue` plus `minValueGap`. Unset, it is two thirds of the way from `min` to `max`.An assignment that is not a finite number is ignored, and `endValue` keeps the last valid value it held. Assigning `null` or `undefined` unsets it, restoring the default. See Range and gap.
`labeled`	`boolean`default `false`	Whether a label with the handle's value appears while the handle is pressed or focused. It stays briefly after a press ends. See Value labels.
`max`	`number`default `100`	The highest value the range can take. If `min` is not below it, `min` becomes `max` less 1.An assignment that is not a finite number is ignored, and `max` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Range and gap.
`min`	`number`default `0`	The lowest value the range can take. A minimum that is not below `max` is replaced by `max` less 1.An assignment that is not a finite number is ignored, and `min` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Range and gap.
`minValueGap`	`number`	The least distance between the two handles, in the control's value units. Without it the handles can meet but never cross.An assignment that is not a finite number is ignored, and `minValueGap` keeps the value it already had. Assigning `null` or `undefined` unsets it, removing the gap constraint. See Range and gap.
`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`orientation`	`SliderOrientationTypeSliderOrientation.Horizontal`, `.Vertical`default `SliderOrientation.Horizontal`	Sets whether the slider runs horizontally or vertically. It is at least 200px long either way. See Orientation.
`pageValue`	`number`	How far PageUp and PageDown move the value. Defaults to ten times `step`.An assignment that is not a finite number is ignored, and `pageValue` keeps the value it already had. Assigning `null` or `undefined` unsets it, restoring the default. See Range and gap.
`rateLimitDelay`	`number`default `150`	The delay in milliseconds that paces change events in the `Debounced`, `Throttled` and `Adaptive` change modes. Other modes ignore it.An assignment that is not a finite number is ignored, and `rateLimitDelay` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Change mode.
`sinkDutyCycle`	`number`default `1`	The share of the sink's time this control may occupy, above 0 and up to 1, for `ChangeEventMode.Adaptive` only. At 1 the next call goes out as soon as the last one finishes. Lower it when the sink is shared, so one person dragging does not saturate it: at 0.25 the control leaves three quarters of the time idle.An assignment that is not a finite number in `(0, 1]` is ignored, and the property keeps the value it already had. See Change mode.
`size`	`SizeTypeSize.ExtraSmall`, `.Small`, `.Medium`, `.Large`, `.ExtraLarge`default `Size.ExtraSmall`, from the style configuration	Sets how large the component is, from `extra-small` to `extra-large`. A larger size makes it taller. See Size.
`softDisabled`	`boolean`default `false`	Disables the control but keeps it focusable and in the Tab order. It carries `aria-disabled="true"`, and neither the pointer nor the keyboard changes its value. Use it when a disabled control must stay reachable by keyboard and screen reader. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls.
`startAriaLabel`	`string`	The start handle's accessible name. The name read is this text followed by "start".
`startAriaValueText`	`string`	The text a screen reader announces for the start handle's value. Unset, it falls back to `startLabel`, then to the number.
`startLabel`	`string`	Fixed text that replaces the start value's number in its value label. It is also the start handle's accessible name unless `startAriaLabel` is set, and its value text unless `startAriaValueText` is set. It does not follow `startValue`. See Value labels.
`startName`	`string`	The name the starting value submits under. Falls back to `name`, so a range with only `name` submits both values under it, start first. See Forms.
`startValue`	`number`	The start handle's value. It cannot pass `endValue` less `minValueGap`. Unset, it is a third of the way from `min` to `max`.An assignment that is not a finite number is ignored, and `startValue` keeps the last valid value it held. Assigning `null` or `undefined` unsets it, restoring the default. See Range and gap.
`step`	`number`default `1`	The step between values. Where the control has a range, a step above the range is set to the range, and a step of 0 or less to 1.An assignment that is not a finite number is ignored, and `step` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Range and gap, Tickmarks.
`tickmarks`	`SliderTickmarkTypeSliderTickmark.None`, `.ContrastEndStop`, `.Values`default `SliderTickmark.ContrastEndStop`	The type of tickmarks to show. Ignored while the `track-background` slot is filled. See Tickmarks.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.

Slots⁠

Slot	Description
`track-background`	Content that shows through the slider's track in place of its colors. Tickmarks and the end stop are not drawn while it is filled.

Events⁠

Event	Type	Description
`input`	`RangeTrackControlInputEvent`	Fired during interaction. Its `detail` carries both handle values, as `startValue` and `endValue`. It bubbles and is composed. Its `detail` carries `originalEvent`.
`change`	`RangeTrackControlChangeEvent`	Fired when interaction ends or based on `changeMode`. Its `detail` carries both handle values, as `startValue` and `endValue`. It bubbles. Its `detail` carries `originalEvent`.

change fires only when a value differs from the last one sent, and setting start-value or end-value from code fires neither event.

Props⁠

Prop	Type	Description
`ariaDescribedBy`	`string`	The IDs of the elements that describe the control, space-separated. An element elsewhere on the page is not found.
`ariaDescription`	`string`	Not announced by assistive technology. `ariaDescribedBy` is no substitute: an ID elsewhere on the page is not found.
`ariaErrorMessage`	`string`	The ID of the element describing the value's error. Used only while `ariaInvalid` is "true".
`ariaInvalid`	`string`	Whether the control's value is invalid. A screen reader announces it; the control's appearance does not change.
`ariaLabelledBy`	`string`	The IDs of the elements that label the control, space-separated. An element elsewhere on the page is not found: use `aria-label`.
`asyncSink`	`ValueChangeSink`	The async work, such as a request to a server, that `ChangeEventMode.Adaptive` paces `change` events against: the control asks for the next one only when the last has finished, no faster than `rateLimitDelay`. A slow sink is asked less often, and is not called once per value change. Read the control's value inside it, as a `change` listener would. Ignored in every other mode. See Change mode.
`changeMode`	`ChangeEventModeTypeChangeEventMode.Debounced`, `.Immediate`, `.InteractionEnded`, `.Throttled`, `.Adaptive`default `ChangeEventMode.InteractionEnded`	When the control fires `change` while the user is still moving it. `Debounced`, `Throttled` and `Adaptive` are paced by `rateLimitDelay`, which `Adaptive` treats as a target, and `Adaptive` also paces against `asyncSink`. See Change mode.
`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled.
`endAriaLabel`	`string`	The end handle's accessible name. The name read is this text followed by "end".
`endAriaValueText`	`string`	The text a screen reader announces for the end handle's value. Unset, it falls back to `endLabel`, then to the number.
`endLabel`	`string`	Fixed text that replaces the end value's number in its value label. It is also the end handle's accessible name unless `endAriaLabel` is set, and its value text unless `endAriaValueText` is set. It does not follow `endValue`. See Value labels.
`endName`	`string`	The name the ending value submits under. Falls back to `startName`. See Forms.
`endValue`	`number`	The end handle's value. It cannot fall below `startValue` plus `minValueGap`. Unset, it is two thirds of the way from `min` to `max`.An assignment that is not a finite number is ignored, and `endValue` keeps the last valid value it held. Assigning `null` or `undefined` unsets it, restoring the default. See Range and gap.
`labeled`	`boolean`default `false`	Whether a label with the handle's value appears while the handle is pressed or focused. It stays briefly after a press ends. See Value labels.
`max`	`number`default `100`	The highest value the range can take. If `min` is not below it, `min` becomes `max` less 1.An assignment that is not a finite number is ignored, and `max` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Range and gap.
`min`	`number`default `0`	The lowest value the range can take. A minimum that is not below `max` is replaced by `max` less 1.An assignment that is not a finite number is ignored, and `min` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Range and gap.
`minValueGap`	`number`	The least distance between the two handles, in the control's value units. Without it the handles can meet but never cross.An assignment that is not a finite number is ignored, and `minValueGap` keeps the value it already had. Assigning `null` or `undefined` unsets it, removing the gap constraint. See Range and gap.
`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`orientation`	`SliderOrientationTypeSliderOrientation.Horizontal`, `.Vertical`default `SliderOrientation.Horizontal`	Sets whether the slider runs horizontally or vertically. It is at least 200px long either way. See Orientation.
`pageValue`	`number`	How far PageUp and PageDown move the value. Defaults to ten times `step`.An assignment that is not a finite number is ignored, and `pageValue` keeps the value it already had. Assigning `null` or `undefined` unsets it, restoring the default. See Range and gap.
`rateLimitDelay`	`number`default `150`	The delay in milliseconds that paces change events in the `Debounced`, `Throttled` and `Adaptive` change modes. Other modes ignore it.An assignment that is not a finite number is ignored, and `rateLimitDelay` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Change mode.
`sinkDutyCycle`	`number`default `1`	The share of the sink's time this control may occupy, above 0 and up to 1, for `ChangeEventMode.Adaptive` only. At 1 the next call goes out as soon as the last one finishes. Lower it when the sink is shared, so one person dragging does not saturate it: at 0.25 the control leaves three quarters of the time idle.An assignment that is not a finite number in `(0, 1]` is ignored, and the property keeps the value it already had. See Change mode.
`size`	`SizeTypeSize.ExtraSmall`, `.Small`, `.Medium`, `.Large`, `.ExtraLarge`default `Size.ExtraSmall`, from the style configuration	Sets how large the component is, from `extra-small` to `extra-large`. A larger size makes it taller. See Size.
`softDisabled`	`boolean`default `false`	Disables the control but keeps it focusable and in the Tab order. It carries `aria-disabled="true"`, and neither the pointer nor the keyboard changes its value. Use it when a disabled control must stay reachable by keyboard and screen reader. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls.
`startAriaLabel`	`string`	The start handle's accessible name. The name read is this text followed by "start".
`startAriaValueText`	`string`	The text a screen reader announces for the start handle's value. Unset, it falls back to `startLabel`, then to the number.
`startLabel`	`string`	Fixed text that replaces the start value's number in its value label. It is also the start handle's accessible name unless `startAriaLabel` is set, and its value text unless `startAriaValueText` is set. It does not follow `startValue`. See Value labels.
`startName`	`string`	The name the starting value submits under. Falls back to `name`, so a range with only `name` submits both values under it, start first. See Forms.
`startValue`	`number`	The start handle's value. It cannot pass `endValue` less `minValueGap`. Unset, it is a third of the way from `min` to `max`.An assignment that is not a finite number is ignored, and `startValue` keeps the last valid value it held. Assigning `null` or `undefined` unsets it, restoring the default. See Range and gap.
`step`	`number`default `1`	The step between values. Where the control has a range, a step above the range is set to the range, and a step of 0 or less to 1.An assignment that is not a finite number is ignored, and `step` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Range and gap, Tickmarks.
`tickmarks`	`SliderTickmarkTypeSliderTickmark.None`, `.ContrastEndStop`, `.Values`default `SliderTickmark.ContrastEndStop`	The type of tickmarks to show. Ignored while the `trackBackgroundSnippet` snippet is filled. See Tickmarks.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.

Snippets⁠

Snippet	Description
`trackBackgroundSnippet`	Content that shows through the slider's track in place of its colors. Tickmarks and the end stop are not drawn while it is filled.

Events⁠

Prop	Type	Description
`onInput`	`RangeTrackControlInputEvent`	Fired during interaction. Its `detail` carries both handle values, as `startValue` and `endValue`. It bubbles and is composed. Its `detail` carries `originalEvent`.
`onChange`	`RangeTrackControlChangeEvent`	Fired when interaction ends or based on `changeMode`. Its `detail` carries both handle values, as `startValue` and `endValue`. It bubbles. Its `detail` carries `originalEvent`.

change fires only when a value differs from the last one sent, and setting start-value or end-value from code fires neither event.

Each attribute value has its own tokens; a cell shows its token's value, and selecting the cell shows the token's fallback path, with each name and value ready to copy. For example, the extra-small column's handle-length row is --ct-slider-xsmall-handle-length, which defaults to 44px.

Size⁠

Token names spell extra-small as xsmall and extra-large as xlarge.

Name	`extra-small`	`small`	`medium`	`large`	`extra-large`
`handle-length`	`44px` `--ct-slider-xsmall-handle-length`	`44px` `--ct-slider-small-handle-length`	`44px` `--ct-slider-medium-handle-length`	`68px` `--ct-slider-large-handle-length`	`108px` `--ct-slider-xlarge-handle-length`
`track-corner-end-end-radius`	same as `track-corner-radius` `--ct-slider-xsmall-track-corner-end-end-radius`	same as `track-corner-radius` `--ct-slider-small-track-corner-end-end-radius`	same as `track-corner-radius` `--ct-slider-medium-track-corner-end-end-radius`	same as `track-corner-radius` `--ct-slider-large-track-corner-end-end-radius`	same as `track-corner-radius` `--ct-slider-xlarge-track-corner-end-end-radius`
`track-corner-end-start-radius`	same as `track-corner-radius` `--ct-slider-xsmall-track-corner-end-start-radius`	same as `track-corner-radius` `--ct-slider-small-track-corner-end-start-radius`	same as `track-corner-radius` `--ct-slider-medium-track-corner-end-start-radius`	same as `track-corner-radius` `--ct-slider-large-track-corner-end-start-radius`	same as `track-corner-radius` `--ct-slider-xlarge-track-corner-end-start-radius`
`track-corner-radius`	`8px` `--ct-slider-xsmall-track-corner-radius`	`8px` `--ct-slider-small-track-corner-radius`	`12px` `--ct-slider-medium-track-corner-radius`	`16px` `--ct-slider-large-track-corner-radius`	`28px` `--ct-slider-xlarge-track-corner-radius`
`track-corner-start-end-radius`	same as `track-corner-radius` `--ct-slider-xsmall-track-corner-start-end-radius`	same as `track-corner-radius` `--ct-slider-small-track-corner-start-end-radius`	same as `track-corner-radius` `--ct-slider-medium-track-corner-start-end-radius`	same as `track-corner-radius` `--ct-slider-large-track-corner-start-end-radius`	same as `track-corner-radius` `--ct-slider-xlarge-track-corner-start-end-radius`
`track-corner-start-start-radius`	same as `track-corner-radius` `--ct-slider-xsmall-track-corner-start-start-radius`	same as `track-corner-radius` `--ct-slider-small-track-corner-start-start-radius`	same as `track-corner-radius` `--ct-slider-medium-track-corner-start-start-radius`	same as `track-corner-radius` `--ct-slider-large-track-corner-start-start-radius`	same as `track-corner-radius` `--ct-slider-xlarge-track-corner-start-start-radius`
`track-thickness`	`16px` `--ct-slider-xsmall-track-thickness`	`24px` `--ct-slider-small-track-thickness`	`40px` `--ct-slider-medium-track-thickness`	`56px` `--ct-slider-large-track-thickness`	`96px` `--ct-slider-xlarge-track-thickness`

Other tokens⁠

These stay the same whatever the size.

Names and states⁠

A range slider has two handles, and each is announced as a slider, following the WAI-ARIA Authoring Practices: Slider pattern.

Name each handle with start-aria-label and end-aria-label. The name read out is that text followed by "start" or "end". Without it, the handle takes start-label or end-label, and without those, its current number, which is a poor name.
An aria-label on the range slider itself is not announced. Use the per-handle properties instead.
start-aria-valuetext and end-aria-valuetext set what is read for the value. Without them, a handle reads its label text, then its number.
Each handle announces its own limits: the start handle's maximum is the end value, and the end handle's minimum is the start value, so neither announces a position it cannot reach.
aria-labelledby, aria-describedby, aria-invalid, and aria-errormessage apply to both handles. An ID that points to an element elsewhere on the page is not found.
aria-description is not announced, and aria-describedby is no substitute, since it cannot point at an element elsewhere on the page.
Each handle announces its orientation from orientation.
The value label from labeled is announced politely while it shows.
When one value matters more than a range, choose a Slider.

Keyboard and focus⁠

Key	Action
Tab	Moves focus to the start handle, then the end handle.
Shift+Tab	Moves focus back, from the end handle to the start handle.
Right Arrow, Up Arrow	Increases the focused handle's value by `step`.
Left Arrow, Down Arrow	Decreases the focused handle's value by `step`.
Page Up	Increases the value by `page-value`, which is ten times `step` unless set.
Page Down	Decreases the value by `page-value`.
Home	Moves the handle toward `min`, as far as the other handle and `min-value-gap` allow.
End	Moves the handle toward `max`, as far as the other handle and `min-value-gap` allow.

The range slider ignores keys while a pointer drag is in progress.

Each handle draws a focus ring on keyboard focus, on the handle only.
disabled removes both handles from the Tab order.
In a right-to-left layout, Right Arrow and Page Up decrease the value, and Left Arrow and Page Down increase it. Up Arrow and Down Arrow do not change.

Pointer and touch⁠

touch-target offers none, overflow and wrapper. Material's touch target is 48 by 48 pixels; WCAG 2.5.8 asks for 24 by 24. The default meets both, and Size shows each choice.
none reduces the target to the visible track and handle. Check that size against the 24 by 24 pixel minimum before choosing it.

Display settings⁠

Forced colors: each handle and value label take system colors with visible borders, and a handle gains a thicker ring on hover and while dragged.
Reduced motion: the handle, value label, focus ring, and fill transitions are turned off.
Right-to-left: the track mirrors, and the arrow keys and Page Up and Page Down swap as the keyboard table says.

Standards⁠

With its defaults, the range slider meets three WCAG 2.2 success criteria:

2.1.1 Keyboard (A)
2.4.7 Focus Visible (AA)
2.5.8 Target Size (Minimum) (AA)

Three more depend on how you use it:

2.5.3 Label in Name (A): where visible text labels the range, start each handle's name with the same words.
3.3.1 Error Identification (A): when the range is invalid, set aria-invalid and point aria-errormessage at text that says what is wrong.
4.1.2 Name, Role, Value (A): set start-aria-label and end-aria-label so each handle has a name that says what it measures.

Token	Value
`--ct-slider-active-handle-space`	`5px` `--ct-slider-active-handle-space`
`--ct-slider-active-handle-width`	`2px` `--ct-slider-active-handle-width`
`--ct-slider-active-tick-mark-color`	`--ct-sys-color-on-primary` `--ct-slider-active-tick-mark-color`
`--ct-slider-active-tick-mark-opacity`	`1` `--ct-slider-active-tick-mark-opacity`
`--ct-slider-active-track-color`	`--ct-sys-color-primary` `--ct-slider-active-track-color`
`--ct-slider-center-space`	`4px` `--ct-slider-center-space`
`--ct-slider-disabled-active-tick-mark-color`	`--ct-sys-color-inverse-on-surface` `--ct-slider-disabled-active-tick-mark-color`
`--ct-slider-disabled-active-track-color`	`--ct-sys-color-on-surface` `--ct-slider-disabled-active-track-color`
`--ct-slider-disabled-active-track-opacity`	`0.38` `--ct-slider-disabled-active-track-opacity`
`--ct-slider-disabled-handle-color`	`--ct-sys-color-on-surface` `--ct-slider-disabled-handle-color`
`--ct-slider-disabled-handle-opacity`	`0.38` `--ct-slider-disabled-handle-opacity`
`--ct-slider-disabled-inactive-tick-mark-color`	`--ct-sys-color-on-surface` `--ct-slider-disabled-inactive-tick-mark-color`
`--ct-slider-disabled-inactive-track-color`	`--ct-sys-color-on-surface` `--ct-slider-disabled-inactive-track-color`
`--ct-slider-disabled-inactive-track-opacity`	`0.12` `--ct-slider-disabled-inactive-track-opacity`
`--ct-slider-disabled-tick-mark-opacity`	`0.38` `--ct-slider-disabled-tick-mark-opacity`
`--ct-slider-handle-color`	`--ct-sys-color-primary` `--ct-slider-handle-color`
`--ct-slider-handle-space`	`6px` `--ct-slider-handle-space`
`--ct-slider-handle-width`	`4px` `--ct-slider-handle-width`
`--ct-slider-inactive-tick-mark-color`	`--ct-sys-color-on-secondary-container` `--ct-slider-inactive-tick-mark-color`
`--ct-slider-inactive-tick-mark-opacity`	`1` `--ct-slider-inactive-tick-mark-opacity`
`--ct-slider-inactive-track-color`	`--ct-sys-color-secondary-container` `--ct-slider-inactive-track-color`
`--ct-slider-tick-mark-size`	`4px` `--ct-slider-tick-mark-size`
`--ct-slider-value-indicator-block-space`	`12px` `--ct-slider-value-indicator-block-space`
`--ct-slider-value-indicator-container-color`	`--ct-sys-color-inverse-surface` `--ct-slider-value-indicator-container-color`
`--ct-slider-value-indicator-inline-space`	`16px` `--ct-slider-value-indicator-inline-space`
`--ct-slider-value-indicator-label-font`	`--ct-sys-typescale-label-large-font` `--ct-slider-value-indicator-label-font`
`--ct-slider-value-indicator-label-line-height`	`--ct-sys-typescale-label-large-line-height` `--ct-slider-value-indicator-label-line-height`
`--ct-slider-value-indicator-label-size`	`--ct-sys-typescale-label-large-size` `--ct-slider-value-indicator-label-size`
`--ct-slider-value-indicator-label-text-color`	`--ct-sys-color-inverse-on-surface` `--ct-slider-value-indicator-label-text-color`
`--ct-slider-value-indicator-label-tracking`	`--ct-sys-typescale-label-large-tracking` `--ct-slider-value-indicator-label-tracking`
`--ct-slider-value-indicator-label-weight`	`--ct-sys-typescale-label-large-weight` `--ct-slider-value-indicator-label-weight`

Range slider

Reference docs⁠link

Choosing sliders and dials⁠link

Built in⁠link

Using range sliders well⁠link

Size⁠link

Range and gap⁠link

Value labels⁠link

Orientation⁠link

Tickmarks⁠link

Change mode⁠link

Forms⁠link

Disabled⁠link

Properties⁠link

Slots⁠link

Events⁠link

Props⁠link

Children⁠link

Events⁠link

Parameters⁠link

Render fragments⁠link

Event callbacks⁠link

Inputs⁠link

Content projection⁠link

Outputs⁠link

Props⁠link

Slots⁠link

Events⁠link

Props⁠link

Snippets⁠link

Events⁠link

Size⁠link

Other tokens⁠link

Names and states⁠link

Keyboard and focus⁠link

Pointer and touch⁠link

Display settings⁠link

Standards⁠link

Reference docs⁠

Choosing sliders and dials⁠

Built in⁠

Using range sliders well⁠

Size⁠

Range and gap⁠

Value labels⁠

Orientation⁠

Tickmarks⁠

Change mode⁠

Forms⁠

Disabled⁠

Properties⁠

Slots⁠

Events⁠

Props⁠

Children⁠

Events⁠

Parameters⁠

Render fragments⁠

Event callbacks⁠

Inputs⁠

Content projection⁠

Outputs⁠

Props⁠

Slots⁠

Events⁠

Props⁠

Snippets⁠

Events⁠

Size⁠

Other tokens⁠

Names and states⁠

Keyboard and focus⁠

Pointer and touch⁠

Display settings⁠

Standards⁠