<media-playback-rate-button>

Button to change the speed of playback.

<media-playback-rate-button></media-playback-rate-button>

Setting rates

<media-playback-rate-button rates="1 2 3"></media-playback-rate-button>

Reference

Attributes

Name	Type	Description
`rates`	`string`	Set custom playback rates for the user to choose from.
`disabled`	`boolean`	The Boolean disabled attribute makes the element not mutable or focusable.
`mediacontroller`	`string`	The element `id` of the media controller to connect to (if not nested within).

Media UI Attributes

The media UI attributes will be set automatically by the controller if they are connected via nesting or the mediacontroller attribute. Only set these attributes manually if you know what you're doing.

Name	Type	Description
`mediaplaybackrate`	`string`	Set to the media playback rate.

CSS Variables

Name	Default	Description
`--media-playback-rate-button-display`	`inline-flex`	`display` property of button.
`--media-primary-color`	`rgb(238 238 238)`	Default color of text and icon.
`--media-secondary-color`	`rgb(20 20 30 / .7)`	Default color of button background.
`--media-text-color`	`var(--media-primary-color, rgb(238 238 238))`	`color` of button text.
`--media-icon-color`	`var(--media-primary-color, rgb(238 238 238))`	`fill` color of button icon.
`--media-control-display`		`display` property of control.
`--media-control-background`	`var(--media-secondary-color, rgb(20 20 30 / .7))`	`background` of control.
`--media-control-hover-background`	`rgba(50 50 70 / .7)`	`background` of control hover state.
`--media-control-padding`	`10px`	`padding` of control.
`--media-control-height`	`24px`	`line-height` of control.
`--media-font`	`var(--media-font-weight, bold) var(--media-font-size, 14px) / var(--media-text-content-height, var(--media-control-height, 24px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif)`	`font` shorthand property.
`--media-font-weight`	`bold`	`font-weight` property.
`--media-font-family`	`helvetica neue, segoe ui, roboto, arial, sans-serif`	`font-family` property.
`--media-font-size`	`14px`	`font-size` property.
`--media-text-content-height`	`var(--media-control-height, 24px)`	`line-height` of button text.
`--media-button-icon-width`		`width` of button icon.
`--media-button-icon-height`	`var(--media-control-height, 24px)`	`height` of button icon.
`--media-button-icon-transform`		`transform` of button icon.
`--media-button-icon-transition`		`transition` of button icon.