Dial

A dial sets one value by turning a knob between two stops, such as an oven temperature. Its angles set how far it turns and where the gap sits, to match the knob your users know. Each dial below turns with a drag or the arrow keys; the oven and hot tap switch off and on.

Preheat

Encore

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⁠

The arrow keys move the value one step, Page Up and Page Down move it by page-value, and Home and End jump to min and max.
A press or drag anywhere on the dial sets the value from the pointer's angle, snapped to the nearest step.
change-mode paces the change event, from every movement to once at the end of each drag or key press, so costly work runs only as often as it should.
Turning on labeled gives the handle a readout of its number during a drag or while it has focus.
It submits value under name with its form, and a form reset restores the value it was given in markup.
A value set from code outside min and max is held to the nearer bound and moved to the nearest step.

Using dials well⁠

Material 3 Expressive has no dial, so these rules adapt its guidance for sliders, which a dial resembles.

Fill from a center point (centered) when zero or the default sits in the middle of the range, such as a balance or a trim; fill from min otherwise.
Show a mark at every step (values) when the steps are few and each one means something, such as a fan with five speeds.
Put the unit in value-label, updated from your input handler, when a number alone does not say what it measures.
Choose a Continuous dial for a value with no stops, and a Slider or Range slider when the value belongs on a line.

Size⁠

size sets the dial's diameter, from 112 pixels at extra-small to 292 pixels at extra-large, and the track thickens with it. Omit it and the dial takes its size from your style configuration, which is extra-small unless you have changed it.

touch-target keeps the area that takes a touch at least 48 by 48 pixels, and it comes from your style configuration, which is overflow unless you have changed it. Every dial size is already wider than that, so the setting rarely changes a dial.

Range and steps⁠

min and max set the ends of the range, 0 and 100 unless you set them, and step sets how far each move goes. A drag and the arrow keys both snap to a step, and Page Up and Page Down move by page-value, which is ten steps unless you set it. value holds the current value; left unset, it starts at min.

Angles⁠

min-angle and max-angle set where the two ends of the arc sit. Angles are in degrees measured from 12 o'clock, so 90 is 3 o'clock. The defaults of 240 and 120 give an arc of 240 degrees with its gap at the bottom. origin-angle turns the whole dial, including its gap, by the angle you give it.

Forms⁠

A dial takes part in a form: it submits value as a string under name, and a form reset returns it to the value in its markup. Give each dial in a form its own name.

Disabled⁠

disabled stops the dial responding to a pointer or the keyboard and takes it out of the Tab order. A dial inside a disabled <fieldset> is disabled too.

Change mode⁠

change-mode decides when the dial fires change. The default, interaction-ended, fires once when a drag or a key press ends, so the value you receive is the one the user settled on. immediate fires on every step, for a preview that follows the knob.

debounced and throttled pace change by rate-limit-delay, 150 milliseconds unless you set it. adaptive fires no more often than once per rate-limit-delay, and paces itself against the work you pass as asyncSink, and sink-duty-cycle caps the share of that work's time the dial may take. Without an asyncSink, it paces as throttled does. Event pacing explains the measurement. Turn both dials below and watch when each number updates.

Direction⁠

direction sets which way the value grows. With counterclockwise, the value still runs from the min-angle end to the max-angle end, but min-angle and max-angle are measured counterclockwise from origin-angle. The Right Arrow and Left Arrow keys swap with it.

Tick marks⁠

tickmarks sets the marks along the track. The default, contrast-end-stop, marks the end of the track; values puts a mark at every step, and none leaves the track plain. Use a mark at every step only when the steps are few.

Centered⁠

centered makes the fill run from a center point to the handle, for a value that can go either way from a middle, such as a balance. The center is the midpoint of min and max unless you set center-value; keep it within the range. Set centered as well as center-value, because a center value on its own draws no centered fill.

Value label⁠

labeled shows the value in a bubble above the handle while the dial is pressed or focused, and for a moment after a press ends. Tab to the dial below, or drag it, to see the bubble.

value-label replaces the number with text of your own, in the bubble and in what a screen reader hears. It is fixed text and does not follow the value, so to show a unit, write it into the text as the second dial below does.

Track background⁠

Content in the track-background slot fills the track's shape, so a gradient colors the arc and nothing outside it. While the slot is filled, tickmarks has no effect.

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.
`centered`	`centered`	`boolean`default `false`	Fills from the middle of the track instead of from its start: from `centerValue`, or from the midpoint of `min` and `max` when `centerValue` is not set. See Centered.
`centerValue`	`center-value`	`number`	The value the fill grows from, between `min` and `max`. Ignored unless `centered` is set.An assignment that is not a finite number is ignored, and `centerValue` keeps the value it already had. Assigning `null` or `undefined` unsets it, restoring the default. See Centered.
`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.
`direction`	`directionclockwise`, `counterclockwise`	`DialDirectionDialDirection.Clockwise`, `.CounterClockwise`default `DialDirection.Clockwise`	Sets which way the value increases around the dial. Counterclockwise also measures `minAngle` and `maxAngle` counterclockwise, so the arc's ends swap sides. See Direction.
`disabled`	`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled.
`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 label.
`labels`read-only		`NodeList`	The `<label>` elements associated with the element.
`max`	`max`	`number`default `100`	The highest value the control 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 steps, Centered.
`maxAngle`	`max-angle`	`number`default `120`	The angle in degrees where the maximum value sits, measured from `originAngle` in the dial's `direction`: at the defaults, 0° is 12 o'clock and 90° is 3 o'clock. Counterclockwise, 90° is 9 o'clock.An assignment that is not a finite number is ignored, and `maxAngle` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Angles, Direction.
`min`	`min`	`number`default `0`	The lowest value the control 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 steps, Centered.
`minAngle`	`min-angle`	`number`default `240`	The angle in degrees where the minimum value sits, measured from `originAngle` in the dial's `direction`: at the defaults, 0° is 12 o'clock and 90° is 3 o'clock. Counterclockwise, 90° is 9 o'clock.An assignment that is not a finite number is ignored, and `minAngle` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Angles, Direction.
`name`	`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`originAngle`	`origin-angle`	`number`default `0`	The origin angle offset in degrees, measured clockwise from 12 o'clock in either direction. Rotates the entire dial coordinate system.An assignment that is not a finite number is ignored, and `originAngle` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Angles, Direction.
`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 steps.
`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.
`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 steps, Tick marks.
`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 Tick marks, Track background.
`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.
`value`	`value`	`number`	The control's current value.An assignment that is not a finite number -- `NaN`, `Infinity`, or a string that does not parse as a number -- is ignored, and `value` keeps the last valid value it held. Assigning `null` or `undefined` unsets it, restoring the default. See Range and steps, Forms.
`valueLabel`	`value-label`	`string`	Text shown and announced in place of the value; if not set, the value itself. A screen reader reads it as the value, and as the control's name when `aria-label` is not set. See Value label.

Slots⁠

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

Events⁠

Event	Type	Detail	Description
`input`	`InputEvent`	—	Fires during value changes as the user rotates. It bubbles and is composed.
`change`	`Event`	—	Fires when the value is committed (timing controlled by `changeMode`). It bubbles.

Setting value from code fires neither input nor change. change fires only when the value differs from the last one sent.

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.
`centered`	`boolean`default `false`	Fills from the middle of the track instead of from its start: from `centerValue`, or from the midpoint of `min` and `max` when `centerValue` is not set. See Centered.
`centerValue`	`number`	The value the fill grows from, between `min` and `max`. Ignored unless `centered` is set.An assignment that is not a finite number is ignored, and `centerValue` keeps the value it already had. Assigning `null` or `undefined` unsets it, restoring the default. See Centered.
`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.
`direction`	`DialDirectionTypeDialDirection.Clockwise`, `.CounterClockwise`default `DialDirection.Clockwise`	Sets which way the value increases around the dial. Counterclockwise also measures `minAngle` and `maxAngle` counterclockwise, so the arc's ends swap sides. See Direction.
`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled.
`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 label.
`labels`read-only (ref)	`NodeList`	The `<label>` elements associated with the element.
`max`	`number`default `100`	The highest value the control 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 steps, Centered.
`maxAngle`	`number`default `120`	The angle in degrees where the maximum value sits, measured from `originAngle` in the dial's `direction`: at the defaults, 0° is 12 o'clock and 90° is 3 o'clock. Counterclockwise, 90° is 9 o'clock.An assignment that is not a finite number is ignored, and `maxAngle` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Angles, Direction.
`min`	`number`default `0`	The lowest value the control 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 steps, Centered.
`minAngle`	`number`default `240`	The angle in degrees where the minimum value sits, measured from `originAngle` in the dial's `direction`: at the defaults, 0° is 12 o'clock and 90° is 3 o'clock. Counterclockwise, 90° is 9 o'clock.An assignment that is not a finite number is ignored, and `minAngle` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Angles, Direction.
`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`originAngle`	`number`default `0`	The origin angle offset in degrees, measured clockwise from 12 o'clock in either direction. Rotates the entire dial coordinate system.An assignment that is not a finite number is ignored, and `originAngle` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Angles, Direction.
`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 steps.
`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.
`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 steps, Tick marks.
`tickmarks`	`SliderTickmarkTypeSliderTickmark.None`, `.ContrastEndStop`, `.Values`default `SliderTickmark.ContrastEndStop`	The type of tickmarks to show. Ignored while the `slot="track-background"` child is filled. See Tick marks, Track background.
`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.
`value`	`number`	The control's current value.An assignment that is not a finite number -- `NaN`, `Infinity`, or a string that does not parse as a number -- is ignored, and `value` keeps the last valid value it held. Assigning `null` or `undefined` unsets it, restoring the default. See Range and steps, Forms.
`valueLabel`	`string`	Text shown and announced in place of the value; if not set, the value itself. A screen reader reads it as the value, and as the control's name when `aria-label` is not set. See Value label.

Children⁠

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

Events⁠

Prop	Argument	Description
`onInput`	`React.ChangeEvent<HTMLInputElement>`	Fires during value changes as the user rotates. It bubbles and is composed.
`onChange`	`React.ChangeEvent<HTMLInputElement>`	Fires when the value is committed (timing controlled by `changeMode`). It bubbles.

Setting value from code fires neither input nor change. change fires only when the value differs from the last one sent.

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.
`Centered`	`bool?`default `false`	Fills from the middle of the track instead of from its start: from `CenterValue`, or from the midpoint of `Min` and `Max` when `CenterValue` is not set. See Centered.
`CenterValue`	`double?`	The value the fill grows from, between `Min` and `Max`. Ignored unless `Centered` is set.An assignment that is not a finite number is ignored, and `CenterValue` keeps the value it already had. Assigning `null` or `undefined` unsets it, restoring the default. See Centered.
`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.
`Direction`	`DialDirection?DialDirection.Clockwise`, `.CounterClockwise`default `DialDirection.Clockwise`	Sets which way the value increases around the dial. Counterclockwise also measures `MinAngle` and `MaxAngle` counterclockwise, so the arc's ends swap sides. See Direction.
`Disabled`	`bool?`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled.
`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 label.
`Max`	`double?`default `100`	The highest value the control 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 steps, Centered.
`MaxAngle`	`double?`default `120`	The angle in degrees where the maximum value sits, measured from `OriginAngle` in the dial's `Direction`: at the defaults, 0° is 12 o'clock and 90° is 3 o'clock. Counterclockwise, 90° is 9 o'clock.An assignment that is not a finite number is ignored, and `MaxAngle` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Angles, Direction.
`Min`	`double?`default `0`	The lowest value the control 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 steps, Centered.
`MinAngle`	`double?`default `240`	The angle in degrees where the minimum value sits, measured from `OriginAngle` in the dial's `Direction`: at the defaults, 0° is 12 o'clock and 90° is 3 o'clock. Counterclockwise, 90° is 9 o'clock.An assignment that is not a finite number is ignored, and `MinAngle` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Angles, Direction.
`Name`	`string?`	The name the element's value is submitted under with its form. See Forms.
`OriginAngle`	`double?`default `0`	The origin angle offset in degrees, measured clockwise from 12 o'clock in either direction. Rotates the entire dial coordinate system.An assignment that is not a finite number is ignored, and `OriginAngle` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Angles, Direction.
`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 steps.
`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.
`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 steps, Tick marks.
`Tickmarks`	`SliderTickmark?SliderTickmark.None`, `.ContrastEndStop`, `.Values`default `SliderTickmark.ContrastEndStop`	The type of tickmarks to show. Ignored while the `TrackBackground` render fragment is filled. See Tick marks, Track background.
`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.
`Value`	`double?`	The control's current value.An assignment that is not a finite number -- `NaN`, `Infinity`, or a string that does not parse as a number -- is ignored, and `Value` keeps the last valid value it held. Assigning `null` or `undefined` unsets it, restoring the default. See Range and steps, Forms.
`ValueExpression`	`Expression<Func<double?>>?`	Gets or sets an expression that identifies the bound value.
`ValueLabel`	`string?`	Text shown and announced in place of the value; if not set, the value itself. A screen reader reads it as the value, and as the control's name when `aria-label` is not set. See Value label.

Render fragments⁠

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

Event callbacks⁠

Parameter	Type	Description
`OnInput`	`EventCallback<ChangeEventArgs>`	Fires during value changes as the user rotates. It bubbles and is composed.
`OnChange`	`EventCallback<ChangeEventArgs>`	Fires when the value is committed (timing controlled by `ChangeMode`). It bubbles.

Setting value from code fires neither input nor change. change fires only when the value differs from the last one sent.

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.
`centered`	`boolean`default `false`	Fills from the middle of the track instead of from its start: from `centerValue`, or from the midpoint of `min` and `max` when `centerValue` is not set. See Centered.
`centerValue`	`number`	The value the fill grows from, between `min` and `max`. Ignored unless `centered` is set.An assignment that is not a finite number is ignored, and `centerValue` keeps the value it already had. Assigning `null` or `undefined` unsets it, restoring the default. See Centered.
`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.
`direction`	`DialDirectionTypeDialDirection.Clockwise`, `.CounterClockwise`default `DialDirection.Clockwise`	Sets which way the value increases around the dial. Counterclockwise also measures `minAngle` and `maxAngle` counterclockwise, so the arc's ends swap sides. See Direction.
`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled.
`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 label.
`max`	`number`default `100`	The highest value the control 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 steps, Centered.
`maxAngle`	`number`default `120`	The angle in degrees where the maximum value sits, measured from `originAngle` in the dial's `direction`: at the defaults, 0° is 12 o'clock and 90° is 3 o'clock. Counterclockwise, 90° is 9 o'clock.An assignment that is not a finite number is ignored, and `maxAngle` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Angles, Direction.
`min`	`number`default `0`	The lowest value the control 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 steps, Centered.
`minAngle`	`number`default `240`	The angle in degrees where the minimum value sits, measured from `originAngle` in the dial's `direction`: at the defaults, 0° is 12 o'clock and 90° is 3 o'clock. Counterclockwise, 90° is 9 o'clock.An assignment that is not a finite number is ignored, and `minAngle` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Angles, Direction.
`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`originAngle`	`number`default `0`	The origin angle offset in degrees, measured clockwise from 12 o'clock in either direction. Rotates the entire dial coordinate system.An assignment that is not a finite number is ignored, and `originAngle` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Angles, Direction.
`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 steps.
`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.
`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 steps, Tick marks.
`tickmarks`	`SliderTickmarkTypeSliderTickmark.None`, `.ContrastEndStop`, `.Values`default `SliderTickmark.ContrastEndStop`	The type of tickmarks to show. Ignored while the `track-background` slot is filled. See Tick marks, Track background.
`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.
`value`	`number`	The control's current value.An assignment that is not a finite number -- `NaN`, `Infinity`, or a string that does not parse as a number -- is ignored, and `value` keeps the last valid value it held. Assigning `null` or `undefined` unsets it, restoring the default. See Range and steps, Forms.
`valueLabel`	`string`	Text shown and announced in place of the value; if not set, the value itself. A screen reader reads it as the value, and as the control's name when `aria-label` is not set. See Value label.

Content projection⁠

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

Outputs⁠

Output	Event	Description
`cwInput`	`InputEvent`	Fires during value changes as the user rotates. It bubbles and is composed.
`cwChange`	`Event`	Fires when the value is committed (timing controlled by `changeMode`). It bubbles.

Setting value from code fires neither input nor change. change fires only when the value differs from the last one sent.

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.
`centered`	`boolean`default `false`	Fills from the middle of the track instead of from its start: from `centerValue`, or from the midpoint of `min` and `max` when `centerValue` is not set. See Centered.
`centerValue`	`number`	The value the fill grows from, between `min` and `max`. Ignored unless `centered` is set.An assignment that is not a finite number is ignored, and `centerValue` keeps the value it already had. Assigning `null` or `undefined` unsets it, restoring the default. See Centered.
`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.
`direction`	`DialDirectionTypeDialDirection.Clockwise`, `.CounterClockwise`default `DialDirection.Clockwise`	Sets which way the value increases around the dial. Counterclockwise also measures `minAngle` and `maxAngle` counterclockwise, so the arc's ends swap sides. See Direction.
`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled.
`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 label.
`max`	`number`default `100`	The highest value the control 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 steps, Centered.
`maxAngle`	`number`default `120`	The angle in degrees where the maximum value sits, measured from `originAngle` in the dial's `direction`: at the defaults, 0° is 12 o'clock and 90° is 3 o'clock. Counterclockwise, 90° is 9 o'clock.An assignment that is not a finite number is ignored, and `maxAngle` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Angles, Direction.
`min`	`number`default `0`	The lowest value the control 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 steps, Centered.
`minAngle`	`number`default `240`	The angle in degrees where the minimum value sits, measured from `originAngle` in the dial's `direction`: at the defaults, 0° is 12 o'clock and 90° is 3 o'clock. Counterclockwise, 90° is 9 o'clock.An assignment that is not a finite number is ignored, and `minAngle` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Angles, Direction.
`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`originAngle`	`number`default `0`	The origin angle offset in degrees, measured clockwise from 12 o'clock in either direction. Rotates the entire dial coordinate system.An assignment that is not a finite number is ignored, and `originAngle` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Angles, Direction.
`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 steps.
`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.
`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 steps, Tick marks.
`tickmarks`	`SliderTickmarkTypeSliderTickmark.None`, `.ContrastEndStop`, `.Values`default `SliderTickmark.ContrastEndStop`	The type of tickmarks to show. Ignored while the `track-background` slot is filled. See Tick marks, Track background.
`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.
`value`	`number`	The control's current value.An assignment that is not a finite number -- `NaN`, `Infinity`, or a string that does not parse as a number -- is ignored, and `value` keeps the last valid value it held. Assigning `null` or `undefined` unsets it, restoring the default. See Range and steps, Forms.
`valueLabel`	`string`	Text shown and announced in place of the value; if not set, the value itself. A screen reader reads it as the value, and as the control's name when `aria-label` is not set. See Value label.

Slots⁠

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

Events⁠

Event	Type	Description
`input`	`InputEvent`	Fires during value changes as the user rotates. It bubbles and is composed.
`change`	`Event`	Fires when the value is committed (timing controlled by `changeMode`). It bubbles.

Setting value from code fires neither input nor change. change fires only when the value differs from the last one sent.

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.
`centered`	`boolean`default `false`	Fills from the middle of the track instead of from its start: from `centerValue`, or from the midpoint of `min` and `max` when `centerValue` is not set. See Centered.
`centerValue`	`number`	The value the fill grows from, between `min` and `max`. Ignored unless `centered` is set.An assignment that is not a finite number is ignored, and `centerValue` keeps the value it already had. Assigning `null` or `undefined` unsets it, restoring the default. See Centered.
`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.
`direction`	`DialDirectionTypeDialDirection.Clockwise`, `.CounterClockwise`default `DialDirection.Clockwise`	Sets which way the value increases around the dial. Counterclockwise also measures `minAngle` and `maxAngle` counterclockwise, so the arc's ends swap sides. See Direction.
`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled.
`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 label.
`max`	`number`default `100`	The highest value the control 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 steps, Centered.
`maxAngle`	`number`default `120`	The angle in degrees where the maximum value sits, measured from `originAngle` in the dial's `direction`: at the defaults, 0° is 12 o'clock and 90° is 3 o'clock. Counterclockwise, 90° is 9 o'clock.An assignment that is not a finite number is ignored, and `maxAngle` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Angles, Direction.
`min`	`number`default `0`	The lowest value the control 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 steps, Centered.
`minAngle`	`number`default `240`	The angle in degrees where the minimum value sits, measured from `originAngle` in the dial's `direction`: at the defaults, 0° is 12 o'clock and 90° is 3 o'clock. Counterclockwise, 90° is 9 o'clock.An assignment that is not a finite number is ignored, and `minAngle` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Angles, Direction.
`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`originAngle`	`number`default `0`	The origin angle offset in degrees, measured clockwise from 12 o'clock in either direction. Rotates the entire dial coordinate system.An assignment that is not a finite number is ignored, and `originAngle` keeps the value it already had. `null` and `undefined` are ignored on the same rule. See Angles, Direction.
`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 steps.
`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.
`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 steps, Tick marks.
`tickmarks`	`SliderTickmarkTypeSliderTickmark.None`, `.ContrastEndStop`, `.Values`default `SliderTickmark.ContrastEndStop`	The type of tickmarks to show. Ignored while the `trackBackgroundSnippet` snippet is filled. See Tick marks, Track background.
`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.
`value`	`number`	The control's current value.An assignment that is not a finite number -- `NaN`, `Infinity`, or a string that does not parse as a number -- is ignored, and `value` keeps the last valid value it held. Assigning `null` or `undefined` unsets it, restoring the default. See Range and steps, Forms.
`valueLabel`	`string`	Text shown and announced in place of the value; if not set, the value itself. A screen reader reads it as the value, and as the control's name when `aria-label` is not set. See Value label.

Snippets⁠

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

Events⁠

Prop	Type	Description
`onInput`	`InputEvent`	Fires during value changes as the user rotates. It bubbles and is composed.
`onChange`	`Event`	Fires when the value is committed (timing controlled by `changeMode`). It bubbles.

Setting value from code fires neither input nor change. change fires only when the value differs from the last one sent.

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 diameter row is --ct-dial-xsmall-diameter, which defaults to 112px.

Size⁠

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

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

Other tokens⁠

These stay the same whatever the size.

Names and states⁠

A dial has the slider role and follows the WAI-ARIA Authoring Practices: Slider pattern.

The accessible name is the dial's aria-label. Without one, the name falls back to value-label or to the value itself, so a screen reader announces a bare number: give every dial an aria-label.
A screen reader announces the value, with min and max as its limits. It reads the dial's own aria-valuetext if you set one, else value-label, else the number.
Six settings shape what a screen reader announces: aria-label, aria-valuetext, aria-labelledby, aria-describedby, aria-invalid, and aria-errormessage. Any other ARIA attribute has no effect, and aria-description is not announced.
aria-labelledby, aria-describedby, and aria-errormessage take IDs, and an element elsewhere on the page is not found. Name the dial with aria-label instead.
A screen reader announces the aria-errormessage text only while aria-invalid is "true".
The value bubble from labeled is announced politely while it shows.
For a value with no stops, such as a jog wheel, a Continuous dial suits the job better.

Keyboard and focus⁠

Key	Action
Tab	Moves focus to the dial, and on to the next control
Right Arrow	Increases the value by one `step`; decreases it on a counterclockwise dial
Left Arrow	Decreases the value by one `step`; increases it on a counterclockwise dial
Up Arrow	Increases the value by one `step`
Down Arrow	Decreases the value by one `step`
Page Up	Increases the value by `page-value`, ten steps unless set
Page Down	Decreases the value by `page-value`, ten steps unless set
Home	Sets the value to `min`
End	Sets the value to `max`

The dial ignores keys while a pointer drag is in progress.

A focus ring is drawn around the handle, and only the handle, on keyboard focus.
disabled takes the dial out of the Tab order. A dial inside a disabled <fieldset> is disabled the same way. A dial has no soft-disabled state.

Pointer and touch⁠

A press or a drag anywhere in the dial's box sets the value from the pointer's angle about the center, so a single press works without dragging.
A drag that leaves the arc through the gap holds the value at the nearer end until the pointer comes back into the arc.
The smallest dial is 112 pixels across, well above the 24 by 24 pixels WCAG 2.5.8 asks for. touch-target keeps the area that takes a touch at least 48 by 48 pixels unless it is none (Size).

Display settings⁠

In forced colors, the handle, track, and value bubble take system colors with visible borders, and the handle gains a thicker ring on hover and while dragged.
With reduced motion requested, the handle, value bubble, focus ring, and fill change without transitions.
In right-to-left layouts, nothing mirrors: the arc stays as set, and the arrow keys keep their direction.

Standards⁠

With its defaults, a dial 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:

4.1.2 Name, Role, Value (A): give every dial an aria-label.
3.3.1 Error Identification (A): when the value is invalid, set aria-invalid and point aria-errormessage at text that says what is wrong.
2.5.3 Label in Name (A): where visible text labels the dial, start its aria-label with the same words.

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

Dial

Reference docs⁠link

Choosing sliders and dials⁠link

Built in⁠link

Using dials well⁠link

Size⁠link

Range and steps⁠link

Angles⁠link

Forms⁠link

Disabled⁠link

Change mode⁠link

Direction⁠link

Tick marks⁠link

Centered⁠link

Value label⁠link

Track background⁠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 dials well⁠

Size⁠

Range and steps⁠

Angles⁠

Forms⁠

Disabled⁠

Change mode⁠

Direction⁠

Tick marks⁠

Centered⁠

Value label⁠

Track background⁠

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⁠