@material/web 1.0.0 → 1.0.2-nightly.6a1fb38.0

package/slider/internal/slider-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-styles.css.js","sourceRoot":"","sources":["slider-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_active-track-color: var(--md-slider-active-track-color, var(--md-sys-color-primary, #6750a4));--_active-track-height: var(--md-slider-active-track-height, 4px);--_active-track-shape: var(--md-slider-active-track-shape, 9999px);--_disabled-active-track-color: var(--md-slider-disabled-active-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-active-track-opacity: var(--md-slider-disabled-active-track-opacity, 0.38);--_disabled-handle-color: var(--md-slider-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-handle-elevation: var(--md-slider-disabled-handle-elevation, 0);--_disabled-inactive-track-color: var(--md-slider-disabled-inactive-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-inactive-track-opacity: var(--md-slider-disabled-inactive-track-opacity, 0.12);--_focus-handle-color: var(--md-slider-focus-handle-color, var(--md-sys-color-primary, #6750a4));--_handle-color: var(--md-slider-handle-color, var(--md-sys-color-primary, #6750a4));--_handle-elevation: var(--md-slider-handle-elevation, 1);--_handle-height: var(--md-slider-handle-height, 20px);--_handle-shadow-color: var(--md-slider-handle-shadow-color, var(--md-sys-color-shadow, #000));--_handle-shape: var(--md-slider-handle-shape, 9999px);--_handle-width: var(--md-slider-handle-width, 20px);--_hover-handle-color: var(--md-slider-hover-handle-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-slider-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-slider-hover-state-layer-opacity, 0.08);--_inactive-track-color: var(--md-slider-inactive-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_inactive-track-height: var(--md-slider-inactive-track-height, 4px);--_inactive-track-shape: var(--md-slider-inactive-track-shape, 9999px);--_label-container-color: var(--md-slider-label-container-color, var(--md-sys-color-primary, #6750a4));--_label-container-height: var(--md-slider-label-container-height, 28px);--_pressed-handle-color: var(--md-slider-pressed-handle-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-slider-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-slider-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-slider-state-layer-size, 40px);--_with-overlap-handle-outline-color: var(--md-slider-with-overlap-handle-outline-color, var(--md-sys-color-on-primary, #fff));--_with-overlap-handle-outline-width: var(--md-slider-with-overlap-handle-outline-width, 1px);--_with-tick-marks-active-container-color: var(--md-slider-with-tick-marks-active-container-color, var(--md-sys-color-on-primary, #fff));--_with-tick-marks-container-size: var(--md-slider-with-tick-marks-container-size, 2px);--_with-tick-marks-disabled-container-color: var(--md-slider-with-tick-marks-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_with-tick-marks-inactive-container-color: var(--md-slider-with-tick-marks-inactive-container-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-slider-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-text-font: var(--md-slider-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-slider-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem));--_label-text-size: var(--md-slider-label-text-size, var(--md-sys-typescale-label-medium-size, 0.75rem));--_label-text-weight: var(--md-slider-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)));--_start-fraction: 0;--_end-fraction: 0;--_tick-count: 0;display:inline-flex;vertical-align:middle;min-inline-size:200px;--md-elevation-level: var(--_handle-elevation);--md-elevation-shadow-color: var(--_handle-shadow-color)}md-focus-ring{height:48px;inset:unset;width:48px}md-elevation{transition-duration:250ms}@media(prefers-reduced-motion){.label{transition-duration:0}}:host([disabled]){opacity:var(--_disabled-active-track-opacity);--md-elevation-level: var(--_disabled-handle-elevation)}.container{flex:1;display:flex;align-items:center;position:relative;block-size:var(--_state-layer-size);pointer-events:none;touch-action:none}.track,.tickmarks{position:absolute;inset:0;display:flex;align-items:center}.track::before,.tickmarks::before,.track::after,.tickmarks::after{position:absolute;content:\"\";inset-inline-start:calc(var(--_state-layer-size)/2 - var(--_with-tick-marks-container-size));inset-inline-end:calc(var(--_state-layer-size)/2 - var(--_with-tick-marks-container-size));background-size:calc((100% - var(--_with-tick-marks-container-size)*2)/var(--_tick-count)) 100%}.track::before,.tickmarks::before{block-size:var(--_inactive-track-height);border-radius:var(--_inactive-track-shape)}.track::before{background-color:var(--_inactive-track-color)}.tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-inactive-container-color) 0, var(--_with-tick-marks-inactive-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}:host([disabled]) .track::before{opacity:calc(1/var(--_disabled-active-track-opacity)*var(--_disabled-inactive-track-opacity));background-color:var(--_disabled-inactive-track-color)}.track::after,.tickmarks::after{block-size:var(--_active-track-height);border-radius:var(--_active-track-shape);clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))) 0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)))}.track::after{background-color:var(--_active-track-color)}.tickmarks::after{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-active-container-color) 0, var(--_with-tick-marks-active-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}:host-context([dir=rtl]) .track::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([dir=rtl]) .track::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}.track:dir(rtl)::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host-context([dir=rtl]) .tickmarks::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([dir=rtl]) .tickmarks::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}.tickmarks:dir(rtl)::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([disabled]) .track::after{background-color:var(--_disabled-active-track-color)}:host([disabled]) .tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-disabled-container-color) 0, var(--_with-tick-marks-disabled-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}.handleContainerPadded{position:relative;block-size:100%;inline-size:100%;padding-inline:calc(var(--_state-layer-size)/2)}.handleContainerBlock{position:relative;block-size:100%;inline-size:100%}.handleContainer{position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:calc(100%*var(--_start-fraction));inline-size:calc(100%*(var(--_end-fraction) - var(--_start-fraction)))}.handle{position:absolute;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);border-radius:var(--_handle-shape);display:flex;place-content:center;place-items:center}.handleNub{position:absolute;height:var(--_handle-height);width:var(--_handle-width);border-radius:var(--_handle-shape);background:var(--_handle-color)}:host([disabled]) .handleNub{background:var(--_disabled-handle-color)}input.end:focus~.handleContainerPadded .handle.end>.handleNub,input.start:focus~.handleContainerPadded .handle.start>.handleNub{background:var(--_focus-handle-color)}.container>.handleContainerPadded .handle.hover>.handleNub{background:var(--_hover-handle-color)}:host(:not([disabled])) input.end:active~.handleContainerPadded .handle.end>.handleNub,:host(:not([disabled])) input.start:active~.handleContainerPadded .handle.start>.handleNub{background:var(--_pressed-handle-color)}.onTop.isOverlapping .label,.onTop.isOverlapping .label::before{outline:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.onTop.isOverlapping .handleNub{border:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.handle.start{inset-inline-start:calc(0px - var(--_state-layer-size)/2)}.handle.end{inset-inline-end:calc(0px - var(--_state-layer-size)/2)}.label{position:absolute;box-sizing:border-box;display:flex;padding:4px;place-content:center;place-items:center;border-radius:9999px;color:var(--_label-text-color);font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);inset-block-end:100%;min-inline-size:var(--_label-container-height);min-block-size:var(--_label-container-height);background:var(--_label-container-color);transition:transform 100ms cubic-bezier(0.2, 0, 0, 1);transform-origin:center bottom;transform:scale(0)}:host(:focus-within) .label,.handleContainer.hover .label,:where(:has(input:active)) .label{transform:scale(1)}.label::before,.label::after{position:absolute;display:block;content:\"\";background:inherit}.label::before{inline-size:calc(var(--_label-container-height)/2);block-size:calc(var(--_label-container-height)/2);bottom:calc(var(--_label-container-height)/-10);transform:rotate(45deg)}.label::after{inset:0px;border-radius:inherit}.labelContent{z-index:1}input[type=range]{opacity:0;-webkit-tap-highlight-color:rgba(0,0,0,0);position:absolute;box-sizing:border-box;height:100%;width:100%;margin:0;background:rgba(0,0,0,0);cursor:pointer;pointer-events:auto;appearance:none}input[type=range]:focus{outline:none}::-webkit-slider-runnable-track{-webkit-appearance:none}::-moz-range-track{appearance:none}::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);transform:scaleX(0);opacity:0;z-index:2}::-moz-range-thumb{appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);transform:scaleX(0);opacity:0;z-index:2}.ranged input.start{clip-path:inset(0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))) 0 0)}:host-context([dir=rtl]) .ranged input.start{clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))))}:host([dir=rtl]) .ranged input.start{clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))))}.ranged input.start:dir(rtl){clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))))}.ranged input.end{clip-path:inset(0 0 0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)))}:host-context([dir=rtl]) .ranged input.end{clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)) 0 0)}:host([dir=rtl]) .ranged input.end{clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)) 0 0)}.ranged input.end:dir(rtl){clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)) 0 0)}.onTop{z-index:1}.handle{--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}md-ripple{border-radius:50%;height:var(--_state-layer-size);width:var(--_state-layer-size)}/*# sourceMappingURL=slider-styles.css.map */\n`;\n "]}
+{"version":3,"file":"slider-styles.css.js","sourceRoot":"","sources":["slider-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_active-track-color: var(--md-slider-active-track-color, var(--md-sys-color-primary, #6750a4));--_active-track-height: var(--md-slider-active-track-height, 4px);--_active-track-shape: var(--md-slider-active-track-shape, 9999px);--_disabled-active-track-color: var(--md-slider-disabled-active-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-active-track-opacity: var(--md-slider-disabled-active-track-opacity, 0.38);--_disabled-handle-color: var(--md-slider-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-handle-elevation: var(--md-slider-disabled-handle-elevation, 0);--_disabled-inactive-track-color: var(--md-slider-disabled-inactive-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-inactive-track-opacity: var(--md-slider-disabled-inactive-track-opacity, 0.12);--_focus-handle-color: var(--md-slider-focus-handle-color, var(--md-sys-color-primary, #6750a4));--_handle-color: var(--md-slider-handle-color, var(--md-sys-color-primary, #6750a4));--_handle-elevation: var(--md-slider-handle-elevation, 1);--_handle-height: var(--md-slider-handle-height, 20px);--_handle-shadow-color: var(--md-slider-handle-shadow-color, var(--md-sys-color-shadow, #000));--_handle-shape: var(--md-slider-handle-shape, 9999px);--_handle-width: var(--md-slider-handle-width, 20px);--_hover-handle-color: var(--md-slider-hover-handle-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-slider-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-slider-hover-state-layer-opacity, 0.08);--_inactive-track-color: var(--md-slider-inactive-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_inactive-track-height: var(--md-slider-inactive-track-height, 4px);--_inactive-track-shape: var(--md-slider-inactive-track-shape, 9999px);--_label-container-color: var(--md-slider-label-container-color, var(--md-sys-color-primary, #6750a4));--_label-container-height: var(--md-slider-label-container-height, 28px);--_pressed-handle-color: var(--md-slider-pressed-handle-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-slider-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-slider-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-slider-state-layer-size, 40px);--_with-overlap-handle-outline-color: var(--md-slider-with-overlap-handle-outline-color, var(--md-sys-color-on-primary, #fff));--_with-overlap-handle-outline-width: var(--md-slider-with-overlap-handle-outline-width, 1px);--_with-tick-marks-active-container-color: var(--md-slider-with-tick-marks-active-container-color, var(--md-sys-color-on-primary, #fff));--_with-tick-marks-container-size: var(--md-slider-with-tick-marks-container-size, 2px);--_with-tick-marks-disabled-container-color: var(--md-slider-with-tick-marks-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_with-tick-marks-inactive-container-color: var(--md-slider-with-tick-marks-inactive-container-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-slider-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-text-font: var(--md-slider-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-slider-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem));--_label-text-size: var(--md-slider-label-text-size, var(--md-sys-typescale-label-medium-size, 0.75rem));--_label-text-weight: var(--md-slider-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)));--_start-fraction: 0;--_end-fraction: 0;--_tick-count: 0;display:inline-flex;vertical-align:middle;min-inline-size:200px;--md-elevation-level: var(--_handle-elevation);--md-elevation-shadow-color: var(--_handle-shadow-color)}md-focus-ring{height:48px;inset:unset;width:48px}md-elevation{transition-duration:250ms}@media(prefers-reduced-motion){.label{transition-duration:0}}:host([disabled]){opacity:var(--_disabled-active-track-opacity);--md-elevation-level: var(--_disabled-handle-elevation)}.container{flex:1;display:flex;align-items:center;position:relative;block-size:var(--_state-layer-size);pointer-events:none;touch-action:none}.track,.tickmarks{position:absolute;inset:0;display:flex;align-items:center}.track::before,.tickmarks::before,.track::after,.tickmarks::after{position:absolute;content:\"\";inset-inline-start:calc(var(--_state-layer-size)/2 - var(--_with-tick-marks-container-size));inset-inline-end:calc(var(--_state-layer-size)/2 - var(--_with-tick-marks-container-size));background-size:calc((100% - var(--_with-tick-marks-container-size)*2)/var(--_tick-count)) 100%}.track::before,.tickmarks::before{block-size:var(--_inactive-track-height);border-radius:var(--_inactive-track-shape)}.track::before{background-color:var(--_inactive-track-color)}.tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-inactive-container-color) 0, var(--_with-tick-marks-inactive-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}:host([disabled]) .track::before{opacity:calc(1/var(--_disabled-active-track-opacity)*var(--_disabled-inactive-track-opacity));background-color:var(--_disabled-inactive-track-color)}.track::after,.tickmarks::after{block-size:var(--_active-track-height);border-radius:var(--_active-track-shape);clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))) 0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)))}.track::after{background-color:var(--_active-track-color)}.tickmarks::after{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-active-container-color) 0, var(--_with-tick-marks-active-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}:host-context([dir=rtl]) .track::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([dir=rtl]) .track::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}.track:dir(rtl)::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host-context([dir=rtl]) .tickmarks::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([dir=rtl]) .tickmarks::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}.tickmarks:dir(rtl)::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([disabled]) .track::after{background-color:var(--_disabled-active-track-color)}:host([disabled]) .tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-disabled-container-color) 0, var(--_with-tick-marks-disabled-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}.handleContainerPadded{position:relative;block-size:100%;inline-size:100%;padding-inline:calc(var(--_state-layer-size)/2)}.handleContainerBlock{position:relative;block-size:100%;inline-size:100%}.handleContainer{position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:calc(100%*var(--_start-fraction));inline-size:calc(100%*(var(--_end-fraction) - var(--_start-fraction)))}.handle{position:absolute;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);border-radius:var(--_handle-shape);display:flex;place-content:center;place-items:center}.handleNub{position:absolute;height:var(--_handle-height);width:var(--_handle-width);border-radius:var(--_handle-shape);background:var(--_handle-color)}:host([disabled]) .handleNub{background:var(--_disabled-handle-color)}input.end:focus~.handleContainerPadded .handle.end>.handleNub,input.start:focus~.handleContainerPadded .handle.start>.handleNub{background:var(--_focus-handle-color)}.container>.handleContainerPadded .handle.hover>.handleNub{background:var(--_hover-handle-color)}:host(:not([disabled])) input.end:active~.handleContainerPadded .handle.end>.handleNub,:host(:not([disabled])) input.start:active~.handleContainerPadded .handle.start>.handleNub{background:var(--_pressed-handle-color)}.onTop.isOverlapping .label,.onTop.isOverlapping .label::before{outline:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.onTop.isOverlapping .handleNub{border:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.handle.start{inset-inline-start:calc(0px - var(--_state-layer-size)/2)}.handle.end{inset-inline-end:calc(0px - var(--_state-layer-size)/2)}.label{position:absolute;box-sizing:border-box;display:flex;padding:4px;place-content:center;place-items:center;border-radius:9999px;color:var(--_label-text-color);font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);inset-block-end:100%;min-inline-size:var(--_label-container-height);min-block-size:var(--_label-container-height);background:var(--_label-container-color);transition:transform 100ms cubic-bezier(0.2, 0, 0, 1);transform-origin:center bottom;transform:scale(0)}:host(:focus-within) .label,.handleContainer.hover .label,:where(:has(input:active)) .label{transform:scale(1)}.label::before,.label::after{position:absolute;display:block;content:\"\";background:inherit}.label::before{inline-size:calc(var(--_label-container-height)/2);block-size:calc(var(--_label-container-height)/2);bottom:calc(var(--_label-container-height)/-10);transform:rotate(45deg)}.label::after{inset:0px;border-radius:inherit}.labelContent{z-index:1}input[type=range]{opacity:0;-webkit-tap-highlight-color:rgba(0,0,0,0);position:absolute;box-sizing:border-box;height:100%;width:100%;margin:0;background:rgba(0,0,0,0);cursor:pointer;pointer-events:auto;appearance:none}input[type=range]:focus{outline:none}::-webkit-slider-runnable-track{-webkit-appearance:none}::-moz-range-track{appearance:none}::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_handle-height);inline-size:var(--_handle-width);opacity:0;z-index:2}input.end::-webkit-slider-thumb{--_track-and-knob-padding: calc( (var(--_state-layer-size) - var(--_handle-width)) / 2 );--_x-translate: calc( var(--_track-and-knob-padding) - 2 * var(--_end-fraction) * var(--_track-and-knob-padding) );transform:translateX(var(--_x-translate))}:host-context([dir=rtl]) input.end::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--_x-translate)))}:host([dir=rtl]) input.end::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--_x-translate)))}input.end:dir(rtl)::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--_x-translate)))}input.start::-webkit-slider-thumb{--_track-and-knob-padding: calc( (var(--_state-layer-size) - var(--_handle-width)) / 2 );--_x-translate: calc( var(--_track-and-knob-padding) - 2 * var(--_start-fraction) * var(--_track-and-knob-padding) );transform:translateX(var(--_x-translate))}:host-context([dir=rtl]) input.start::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--_x-translate)))}:host([dir=rtl]) input.start::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--_x-translate)))}input.start:dir(rtl)::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--_x-translate)))}::-moz-range-thumb{appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);transform:scaleX(0);opacity:0;z-index:2}.ranged input.start{clip-path:inset(0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))) 0 0)}:host-context([dir=rtl]) .ranged input.start{clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))))}:host([dir=rtl]) .ranged input.start{clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))))}.ranged input.start:dir(rtl){clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))))}.ranged input.end{clip-path:inset(0 0 0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)))}:host-context([dir=rtl]) .ranged input.end{clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)) 0 0)}:host([dir=rtl]) .ranged input.end{clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)) 0 0)}.ranged input.end:dir(rtl){clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)) 0 0)}.onTop{z-index:1}.handle{--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}md-ripple{border-radius:50%;height:var(--_state-layer-size);width:var(--_state-layer-size)}/*# sourceMappingURL=slider-styles.css.map */\n`;\n "]}

package/slider/internal/slider.d.ts

@@ -7,18 +7,22 @@ import '../../elevation/elevation.js';
 import '../../focus/md-focus-ring.js';
 import '../../ripple/ripple.js';
 import { LitElement, PropertyValues } from 'lit';
+import { getFormValue } from '../../labs/behaviors/form-associated.js';
+declare const sliderBaseClass: import("../../labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../labs/behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../labs/behaviors/form-associated.js").FormAssociatedConstructor, import("../../labs/behaviors/form-associated.js").FormAssociated>;
 /**
  * Slider component.
+ *
+ *
+ * @fires change {Event} The native `change` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
+ * --bubbles
+ * @fires input {InputEvent} The native `input` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+ * --bubbles --composed
  */
-export declare class Slider extends LitElement {
+export declare class Slider extends sliderBaseClass {
     /** @nocollapse */
     static shadowRootOptions: ShadowRootInit;
-    /** @nocollapse */
-    static readonly formAssociated = true;
-    /**
-     * Whether or not the slider is disabled.
-     */
-    disabled: boolean;
     /**
      * The slider minimum value
      */
@@ -92,11 +96,6 @@ export declare class Slider extends LitElement {
      * slideable handles for the valueStart and valueEnd properties.
      */
     range: boolean;
-    /**
-     * The HTML name to use in form submission.
-     */
-    get name(): string;
-    set name(name: string);
     /**
      * The HTML name to use in form submission for a range slider's starting
      * value. Use `name` instead if both the start and end values should use the
@@ -111,14 +110,6 @@ export declare class Slider extends LitElement {
      */
     get nameEnd(): string;
     set nameEnd(name: string);
-    /**
-     * The associated form element with which this element's value will submit.
-     */
-    get form(): HTMLFormElement;
-    /**
-     * The labels this element is associated with.
-     */
-    get labels(): NodeList;
     private readonly inputStart;
     private readonly handleStart;
     private readonly rippleStart;
@@ -136,13 +127,11 @@ export declare class Slider extends LitElement {
     private get renderAriaLabelEnd();
     private get renderAriaValueTextEnd();
     private ripplePointerId;
-    private isRedisptchingEvent;
+    private isRedispatchingEvent;
     private action?;
-    private readonly internals;
     constructor();
     focus(): void;
     protected willUpdate(changed: PropertyValues): void;
-    protected update(changed: PropertyValues<Slider>): void;
     protected updated(changed: PropertyValues): void;
     protected render(): import("lit-html").TemplateResult<1>;
     private renderTrack;
@@ -180,8 +169,10 @@ export declare class Slider extends LitElement {
     private clampAction;
     private handleInput;
     private handleChange;
-    /** @private */
+    disabled: boolean;
+    name: string;
+    [getFormValue](): string | FormData;
     formResetCallback(): void;
-    /** @private */
     formStateRestoreCallback(state: string | Array<[string, string]> | null): void;
 }
+export {};

package/slider/internal/slider.js

@@ -13,22 +13,25 @@ import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
 import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
-import { dispatchActivationClick, isActivationClick, redispatchEvent } from '../../internal/controller/events.js';
+import { dispatchActivationClick, isActivationClick, redispatchEvent, } from '../../internal/controller/events.js';
+import { mixinElementInternals } from '../../labs/behaviors/element-internals.js';
+import { getFormValue, mixinFormAssociated, } from '../../labs/behaviors/form-associated.js';
 // Disable warning for classMap with destructuring
-// tslint:disable:quoted-properties-on-dictionary
+// tslint:disable:no-implicit-dictionary-conversion
+// Separate variable needed for closure.
+const sliderBaseClass = mixinFormAssociated(mixinElementInternals(LitElement));
 /**
  * Slider component.
+ *
+ *
+ * @fires change {Event} The native `change` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
+ * --bubbles
+ * @fires input {InputEvent} The native `input` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+ * --bubbles --composed
  */
-export class Slider extends LitElement {
-    /**
-     * The HTML name to use in form submission.
-     */
-    get name() {
-        return this.getAttribute('name') ?? '';
-    }
-    set name(name) {
-        this.setAttribute('name', name);
-    }
+export class Slider extends sliderBaseClass {
     /**
      * The HTML name to use in form submission for a range slider's starting
      * value. Use `name` instead if both the start and end values should use the
@@ -51,29 +54,18 @@ export class Slider extends LitElement {
     set nameEnd(name) {
         this.setAttribute('name-end', name);
     }
-    /**
-     * The associated form element with which this element's value will submit.
-     */
-    get form() {
-        return this.internals.form;
-    }
-    /**
-     * The labels this element is associated with.
-     */
-    get labels() {
-        return this.internals.labels;
-    }
     // Note: start aria-* properties are only applied when range=true, which is
     // why they do not need to handle both cases.
     get renderAriaLabelStart() {
         // Needed for closure conformance
         const { ariaLabel } = this;
-        return this.ariaLabelStart || ariaLabel && `${ariaLabel} start` ||
-            this.valueLabelStart || String(this.valueStart);
+        return (this.ariaLabelStart ||
+            (ariaLabel && `${ariaLabel} start`) ||
+            this.valueLabelStart ||
+            String(this.valueStart));
     }
     get renderAriaValueTextStart() {
-        return this.ariaValueTextStart || this.valueLabelStart ||
-            String(this.valueStart);
+        return (this.ariaValueTextStart || this.valueLabelStart || String(this.valueStart));
     }
     // Note: end aria-* properties are applied for single and range sliders, which
     // is why it needs to handle `this.range` (while start aria-* properties do
@@ -82,15 +74,16 @@ export class Slider extends LitElement {
         // Needed for closure conformance
         const { ariaLabel } = this;
         if (this.range) {
-            return this.ariaLabelEnd || ariaLabel && `${ariaLabel} end` ||
-                this.valueLabelEnd || String(this.valueEnd);
+            return (this.ariaLabelEnd ||
+                (ariaLabel && `${ariaLabel} end`) ||
+                this.valueLabelEnd ||
+                String(this.valueEnd));
         }
         return ariaLabel || this.valueLabel || String(this.value);
     }
     get renderAriaValueTextEnd() {
         if (this.range) {
-            return this.ariaValueTextEnd || this.valueLabelEnd ||
-                String(this.valueEnd);
+            return (this.ariaValueTextEnd || this.valueLabelEnd || String(this.valueEnd));
         }
         // Needed for conformance
         const { ariaValueText } = this;
@@ -98,10 +91,6 @@ export class Slider extends LitElement {
     }
     constructor() {
         super();
-        /**
-         * Whether or not the slider is disabled.
-         */
-        this.disabled = false;
         /**
          * The slider minimum value
          */
@@ -172,9 +161,8 @@ export class Slider extends LitElement {
         this.handlesOverlapping = false;
         // used in synthetic events generated to control ripple hover state.
         this.ripplePointerId = 1;
-        // flag to prvent processing of re-dispatched input event.
-        this.isRedisptchingEvent = false;
-        this.internals = this /* needed for closure */.attachInternals();
+        // flag to prevent processing of re-dispatched input event.
+        this.isRedispatchingEvent = false;
         if (!isServer) {
             this.addEventListener('click', (event) => {
                 if (!isActivationClick(event) || !this.inputEnd) {
@@ -189,13 +177,15 @@ export class Slider extends LitElement {
         this.inputEnd?.focus();
     }
     willUpdate(changed) {
-        this.renderValueStart = changed.has('valueStart') ?
-            this.valueStart :
-            this.inputStart?.valueAsNumber;
+        this.renderValueStart = changed.has('valueStart')
+            ? this.valueStart
+            : this.inputStart?.valueAsNumber;
         const endValueChanged = (changed.has('valueEnd') && this.range) || changed.has('value');
-        this.renderValueEnd = endValueChanged ?
-            (this.range ? this.valueEnd : this.value) :
-            this.inputEnd?.valueAsNumber;
+        this.renderValueEnd = endValueChanged
+            ? this.range
+                ? this.valueEnd
+                : this.value
+            : this.inputEnd?.valueAsNumber;
         // manually handle ripple hover state since the handle is pointer events
         // none.
         if (changed.get('handleStartHover') !== undefined) {
@@ -205,21 +195,6 @@ export class Slider extends LitElement {
             this.toggleRippleHover(this.rippleEnd, this.handleEndHover);
         }
     }
-    update(changed) {
-        if (changed.has('value') || changed.has('range') ||
-            changed.has('valueStart') || changed.has('valueEnd')) {
-            if (this.range) {
-                const data = new FormData();
-                data.append(this.nameStart, String(this.valueStart));
-                data.append(this.nameEnd, String(this.valueEnd));
-                this.internals.setFormValue(data);
-            }
-            else {
-                this.internals.setFormValue(String(this.value));
-            }
-        }
-        super.update(changed);
-    }
     updated(changed) {
         // Validate input rendered value and re-render if necessary. This ensures
         // the rendred handle stays in sync with the input thumb which is used for
@@ -250,8 +225,10 @@ export class Slider extends LitElement {
         else {
             this.value ?? (this.value = this.renderValueEnd);
         }
-        if (changed.has('range') || changed.has('renderValueStart') ||
-            changed.has('renderValueEnd') || this.isUpdatePending) {
+        if (changed.has('range') ||
+            changed.has('renderValueStart') ||
+            changed.has('renderValueEnd') ||
+            this.isUpdatePending) {
             // Only check if the handle nubs are overlapping, as the ripple touch
             // target extends subtantially beyond the boundary of the handle nub.
             const startNub = this.handleStart?.querySelector('.handleNub');
@@ -265,9 +242,9 @@ export class Slider extends LitElement {
     render() {
         const step = this.step === 0 ? 1 : this.step;
         const range = Math.max(this.max - this.min, step);
-        const startFraction = this.range ?
-            (((this.renderValueStart ?? this.min) - this.min) / range) :
-            0;
+        const startFraction = this.range
+            ? ((this.renderValueStart ?? this.min) - this.min) / range
+            : 0;
         const endFraction = ((this.renderValueEnd ?? this.min) - this.min) / range;
         const containerStyles = {
             // for clipping inputs and active track.
@@ -300,70 +277,72 @@ export class Slider extends LitElement {
         const handleStartProps = {
             start: true,
             hover: this.handleStartHover,
-            label: labelStart
+            label: labelStart,
         };
         const handleEndProps = {
             start: false,
             hover: this.handleEndHover,
-            label: labelEnd
+            label: labelEnd,
         };
         const handleContainerClasses = {
-            hover: this.handleStartHover || this.handleEndHover
+            hover: this.handleStartHover || this.handleEndHover,
         };
-        return html `
-      <div
-        class="container ${classMap(containerClasses)}"
-        style=${styleMap(containerStyles)}
-      >
-        ${when(this.range, () => this.renderInput(inputStartProps))}
-        ${this.renderInput(inputEndProps)}
-        ${this.renderTrack()}
-        <div class="handleContainerPadded">
-          <div class="handleContainerBlock">
-            <div class="handleContainer ${classMap(handleContainerClasses)}">
-              ${when(this.range, () => this.renderHandle(handleStartProps))}
-              ${this.renderHandle(handleEndProps)}
-            </div>
+        return html ` <div
+      class="container ${classMap(containerClasses)}"
+      style=${styleMap(containerStyles)}>
+      ${when(this.range, () => this.renderInput(inputStartProps))}
+      ${this.renderInput(inputEndProps)} ${this.renderTrack()}
+      <div class="handleContainerPadded">
+        <div class="handleContainerBlock">
+          <div class="handleContainer ${classMap(handleContainerClasses)}">
+            ${when(this.range, () => this.renderHandle(handleStartProps))}
+            ${this.renderHandle(handleEndProps)}
           </div>
         </div>
-      </div>`;
+      </div>
+    </div>`;
     }
     renderTrack() {
         return html `
-        <div class="track"></div>
-        ${this.ticks ? html `<div class="tickmarks"></div>` : nothing}
-      `;
+      <div class="track"></div>
+      ${this.ticks ? html `<div class="tickmarks"></div>` : nothing}
+    `;
     }
     renderLabel(value) {
         return html `<div class="label" aria-hidden="true">
-        <span class="labelContent" part="label">${value}</span>
-      </div>`;
+      <span class="labelContent" part="label">${value}</span>
+    </div>`;
     }
-    renderHandle({ start, hover, label }) {
+    renderHandle({ start, hover, label, }) {
         const onTop = !this.disabled && start === this.startOnTop;
         const isOverlapping = !this.disabled && this.handlesOverlapping;
         const name = start ? 'start' : 'end';
-        return html `<div class="handle ${classMap({
+        return html `<div
+      class="handle ${classMap({
             [name]: true,
             hover,
             onTop,
-            isOverlapping
+            isOverlapping,
         })}">
       <div class="handleNub"><md-elevation></md-elevation></div>
       ${when(this.labeled, () => this.renderLabel(label))}
       <md-focus-ring part="focus-ring" for=${name}></md-focus-ring>
-      <md-ripple for=${name} class=${name} ?disabled=${this.disabled}></md-ripple>
+      <md-ripple
+        for=${name}
+        class=${name}
+        ?disabled=${this.disabled}></md-ripple>
     </div>`;
     }
-    renderInput({ start, value, ariaLabel, ariaValueText, ariaMin, ariaMax }) {
+    renderInput({ start, value, ariaLabel, ariaValueText, ariaMin, ariaMax, }) {
         // Slider requires min/max set to the overall min/max for both inputs.
         // This is reported to screen readers, which is why we need aria-valuemin
         // and aria-valuemax.
         const name = start ? `start` : `end`;
-        return html `<input type="range"
+        return html `<input
+      type="range"
       class="${classMap({
             start,
-            end: !start
+            end: !start,
         })}"
       @focus=${this.handleFocus}
       @pointerdown=${this.handleDown}
@@ -385,7 +364,7 @@ export class Slider extends LitElement {
       .value=${String(value)}
       .tabIndex=${start ? 1 : 0}
       aria-label=${ariaLabel || nothing}
-      aria-valuetext=${ariaValueText}>`;
+      aria-valuetext=${ariaValueText} />`;
     }
     async toggleRippleHover(ripple, hovering) {
         const rippleEl = await ripple;
@@ -394,10 +373,16 @@ export class Slider extends LitElement {
         }
         // TODO(b/269799771): improve slider ripple connection
         if (hovering) {
-            rippleEl.handlePointerenter(new PointerEvent('pointerenter', { isPrimary: true, pointerId: this.ripplePointerId }));
+            rippleEl.handlePointerenter(new PointerEvent('pointerenter', {
+                isPrimary: true,
+                pointerId: this.ripplePointerId,
+            }));
         }
         else {
-            rippleEl.handlePointerleave(new PointerEvent('pointerleave', { isPrimary: true, pointerId: this.ripplePointerId }));
+            rippleEl.handlePointerleave(new PointerEvent('pointerleave', {
+                isPrimary: true,
+                pointerId: this.ripplePointerId,
+            }));
         }
     }
     handleFocus(event) {
@@ -405,13 +390,16 @@ export class Slider extends LitElement {
     }
     startAction(event) {
         const target = event.target;
-        const fixed = (target === this.inputStart) ? this.inputEnd : this.inputStart;
+        const fixed = target === this.inputStart ? this.inputEnd : this.inputStart;
         this.action = {
             canFlip: event.type === 'pointerdown',
             flipped: false,
             target,
             fixed,
-            values: new Map([[target, target.valueAsNumber], [fixed, fixed?.valueAsNumber]])
+            values: new Map([
+                [target, target.valueAsNumber],
+                [fixed, fixed?.valueAsNumber],
+            ]),
         };
     }
     finishAction(event) {
@@ -486,8 +474,9 @@ export class Slider extends LitElement {
         }
         const { target, fixed } = this.action;
         const isStart = target === this.inputStart;
-        return isStart ? target.valueAsNumber > fixed.valueAsNumber :
-            target.valueAsNumber < fixed.valueAsNumber;
+        return isStart
+            ? target.valueAsNumber > fixed.valueAsNumber
+            : target.valueAsNumber < fixed.valueAsNumber;
     }
     // if start/end start coincident and the first drag input would e.g. move
     // start > end, avoid clamping and "flip" to use the other input
@@ -532,7 +521,7 @@ export class Slider extends LitElement {
     }
     handleInput(event) {
         // avoid processing a re-dispatched event
-        if (this.isRedisptchingEvent) {
+        if (this.isRedispatchingEvent) {
             return;
         }
         let stopPropagation = false;
@@ -563,9 +552,9 @@ export class Slider extends LitElement {
         }
         // ensure event path is correct when flipped.
         if (redispatch) {
-            this.isRedisptchingEvent = true;
+            this.isRedispatchingEvent = true;
             redispatchEvent(target, event);
-            this.isRedisptchingEvent = false;
+            this.isRedispatchingEvent = false;
         }
     }
     handleChange(event) {
@@ -573,14 +562,22 @@ export class Slider extends LitElement {
         // clamped values; note, this only occurs for keyboard
         const changeTarget = event.target;
         const { target, values } = this.action ?? {};
-        const squelch = (target && (target.valueAsNumber === values.get(changeTarget)));
+        const squelch = target && target.valueAsNumber === values.get(changeTarget);
         if (!squelch) {
             redispatchEvent(this, event);
         }
         // ensure keyboard triggered change clears action.
         this.finishAction(event);
     }
-    /** @private */
+    [getFormValue]() {
+        if (this.range) {
+            const data = new FormData();
+            data.append(this.nameStart, String(this.valueStart));
+            data.append(this.nameEnd, String(this.valueEnd));
+            return data;
+        }
+        return String(this.value);
+    }
     formResetCallback() {
         if (this.range) {
             const valueStart = this.getAttribute('value-start');
@@ -592,7 +589,6 @@ export class Slider extends LitElement {
         const value = this.getAttribute('value');
         this.value = value !== null ? Number(value) : undefined;
     }
-    /** @private */
     formStateRestoreCallback(state) {
         if (Array.isArray(state)) {
             const [[, valueStart], [, valueEnd]] = state;
@@ -609,12 +605,10 @@ export class Slider extends LitElement {
     requestUpdateOnAriaChange(Slider);
 })();
 /** @nocollapse */
-Slider.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
-/** @nocollapse */
-Slider.formAssociated = true;
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Slider.prototype, "disabled", void 0);
+Slider.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
 __decorate([
     property({ type: Number })
 ], Slider.prototype, "min", void 0);
@@ -712,7 +706,9 @@ function isOverlapping(elA, elB) {
     }
     const a = elA.getBoundingClientRect();
     const b = elB.getBoundingClientRect();
-    return !(a.top > b.bottom || a.right < b.left || a.bottom < b.top ||
+    return !(a.top > b.bottom ||
+        a.right < b.left ||
+        a.bottom < b.top ||
         a.left > b.right);
 }
 //# sourceMappingURL=slider.js.map