Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit b98d15d

Browse files
joyzhongcopybara-github
joyzhong
authored and
copybara-github
committed
feat(slider): Add hidden input to slider, to support forms submission. This is also prep for moving to use an \<input type="range"\> behind the scenes, in order to support touch-based AT's.
- Initialize slider component values (min, max, value) based on input attributes - When slider value changes, update input `value` attribute and property. - [Range sliders only] When valueStart changes, update endInput `min` attribute. When valueEnd changes, update startInput `max` attribute. - When disabled state changes, update input `disabled` attribute. BREAKING CHANGE: Adds slider adapter methods (get/setInputValue, get/setInputAttribute, removeInputAttribute). Slider DOM structure now contains a hidden input. PiperOrigin-RevId: 343157208
1 parent 99cfb6b commit b98d15d

File tree

7 files changed

+245
-56
lines changed

7 files changed

+245
-56
lines changed

‎packages/mdc-slider/README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ a specific value.
9191

9292
```html
9393
<div class="mdc-slider">
94+
<input class="mdc-slider__input" type="hidden" min="0" max="100" value="50" name="volume">
9495
<div class="mdc-slider__track">
9596
<div class="mdc-slider__track--inactive"></div>
9697
<div class="mdc-slider__track--active">
@@ -110,6 +111,8 @@ a specific value.
110111

111112
```html
112113
<div class="mdc-slider mdc-slider--range">
114+
<input class="mdc-slider__input" type="hidden" min="0" max="70" value="30" name="rangeStart">
115+
<input class="mdc-slider__input" type="hidden" min="30" max="100" value="70" name="rangeEnd">
113116
<div class="mdc-slider__track">
114117
<div class="mdc-slider__track--inactive"></div>
115118
<div class="mdc-slider__track--active">
@@ -142,6 +145,7 @@ To create a discrete slider, add the following:
142145

143146
```html
144147
<div class="mdc-slider mdc-slider--discrete" data-step="10">
148+
<input class="mdc-slider__input" type="hidden" min="0" max="100" value="50" name="volume">
145149
<div class="mdc-slider__track">
146150
<div class="mdc-slider__track--inactive"></div>
147151
<div class="mdc-slider__track--active">
@@ -178,6 +182,7 @@ To add tick marks to a discrete slider, add the following:
178182

179183
```html
180184
<div class="mdc-slider mdc-slider--discrete mdc-slider--tick-marks" data-step="10">
185+
<input class="mdc-slider__input" type="hidden" min="0" max="100" value="50" name="volume">
181186
<div class="mdc-slider__track">
182187
<div class="mdc-slider__track--inactive"></div>
183188
<div class="mdc-slider__track--active">
@@ -214,6 +219,8 @@ To add tick marks to a discrete slider, add the following:
214219

215220
```html
216221
<div class="mdc-slider mdc-slider--range mdc-slider--discrete" data-step="10">
222+
<input class="mdc-slider__input" type="hidden" min="0" max="50" value="20" step="10" name="rangeStart">
223+
<input class="mdc-slider__input" type="hidden" min="20" max="100" value="50" step="10" name="rangeEnd">
217224
<div class="mdc-slider__track">
218225
<div class="mdc-slider__track--inactive"></div>
219226
<div class="mdc-slider__track--active">
@@ -255,6 +262,7 @@ To disable a slider, add the following:
255262

256263
```html
257264
<div class="mdc-slider mdc-slider--disabled">
265+
<input class="mdc-slider__input" type="hidden" min="0" max="100" value="50" step="10" disabled name="volume">
258266
<div class="mdc-slider__track">
259267
<div class="mdc-slider__track--inactive"></div>
260268
<div class="mdc-slider__track--active">

‎packages/mdc-slider/adapter.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,46 @@ export interface MDCSliderAdapter {
7979
*/
8080
setThumbAttribute(attribute: string, value: string, thumb: Thumb): void;
8181

82+
/**
83+
* - If thumb is `Thumb.START`, returns the value property on the start input
84+
* (for range slider variant).
85+
* - If thumb is `Thumb.END`, returns the value property on the end input (or
86+
* only input for single point slider).
87+
*/
88+
getInputValue(thumb: Thumb): string;
89+
90+
/**
91+
* - If thumb is `Thumb.START`, sets the value property on the start input
92+
* (for range slider variant).
93+
* - If thumb is `Thumb.END`, sets the value property on the end input (or
94+
* only input for single point slider).
95+
*/
96+
setInputValue(value: string, thumb: Thumb): void;
97+
98+
/**
99+
* - If thumb is `Thumb.START`, returns the attribute value on the start input
100+
* (for range slider variant).
101+
* - If thumb is `Thumb.END`, returns the attribute value on the end input (or
102+
* only input for single point slider).
103+
*/
104+
getInputAttribute(attribute: string, thumb: Thumb): string|null;
105+
106+
/**
107+
* - If thumb is `Thumb.START`, sets the attribute on the start input
108+
* (for range slider variant).
109+
* - If thumb is `Thumb.END`, sets the attribute on the end input (or
110+
* only input for single point slider).
111+
*/
112+
setInputAttribute(attribute: string, value: string, thumb: Thumb): void;
113+
114+
/**
115+
* - If thumb is `Thumb.START`, removes the attribute on the start input
116+
* (for range slider variant).
117+
* - If thumb is `Thumb.END`, removes the attribute on the end input (or
118+
* only input for single point slider).
119+
*/
120+
removeInputAttribute(attribute: string, thumb: Thumb): void;
121+
82122
/**
83123
* @return Returns the width of the given thumb knob.
84124
*/

‎packages/mdc-slider/component.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export class MDCSlider extends MDCComponent<MDCSliderFoundation> {
3737
}
3838

3939
root!: HTMLElement; // Assigned in MDCComponent constructor.
40+
private inputs!: HTMLInputElement[]; // Assigned in #initialize.
4041
private thumbs!: HTMLElement[]; // Assigned in #initialize.
4142
private trackActive!: HTMLElement; // Assigned in #initialize.
4243

@@ -68,6 +69,18 @@ export class MDCSlider extends MDCComponent<MDCSliderFoundation> {
6869
setThumbAttribute: (attribute, value, thumb: Thumb) => {
6970
this.getThumbEl(thumb).setAttribute(attribute, value);
7071
},
72+
getInputValue: (thumb: Thumb) => this.getInput(thumb).value,
73+
setInputValue: (value: string, thumb: Thumb) => {
74+
this.getInput(thumb).value = value;
75+
},
76+
getInputAttribute: (attribute, thumb: Thumb) =>
77+
this.getInput(thumb).getAttribute(attribute),
78+
setInputAttribute: (attribute, value, thumb: Thumb) => {
79+
this.getInput(thumb).setAttribute(attribute, value);
80+
},
81+
removeInputAttribute: (attribute, thumb: Thumb) => {
82+
this.getInput(thumb).removeAttribute(attribute);
83+
},
7184
isThumbFocused: (thumb: Thumb) =>
7285
this.getThumbEl(thumb) === document.activeElement,
7386
focusThumb: (thumb: Thumb) => {
@@ -173,6 +186,9 @@ export class MDCSlider extends MDCComponent<MDCSliderFoundation> {
173186
* is set before component initialization.
174187
*/
175188
initialize({skipInitialUIUpdate}: {skipInitialUIUpdate?: boolean} = {}) {
189+
this.inputs =
190+
[].slice.call(this.root.querySelectorAll(`.${cssClasses.INPUT}`)) as
191+
HTMLInputElement[];
176192
this.thumbs =
177193
[].slice.call(this.root.querySelectorAll(`.${cssClasses.THUMB}`)) as
178194
HTMLElement[];
@@ -233,6 +249,11 @@ export class MDCSlider extends MDCComponent<MDCSliderFoundation> {
233249
this.thumbs[0];
234250
}
235251

252+
private getInput(thumb: Thumb) {
253+
return thumb === Thumb.END ? this.inputs[this.inputs.length - 1] :
254+
this.inputs[0];
255+
}
256+
236257
/** Adds tick mark elements to the given container. */
237258
private addTickMarks(tickMarkContainer: HTMLElement, tickMarks: TickMark[]) {
238259
const fragment = document.createDocumentFragment();

‎packages/mdc-slider/constants.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
export const cssClasses = {
2626
DISABLED: 'mdc-slider--disabled',
2727
DISCRETE: 'mdc-slider--discrete',
28+
INPUT: 'mdc-slider__input',
2829
RANGE: 'mdc-slider--range',
2930
THUMB: 'mdc-slider__thumb',
3031
THUMB_KNOB: 'mdc-slider__thumb-knob',
@@ -63,6 +64,11 @@ export const attributes = {
6364
// Step value to increment/decrement by for PAGE_UP or PAGE_DOWN keypresses.
6465
DATA_ATTR_BIG_STEP: 'data-big-step',
6566
DATA_ATTR_STEP: 'data-step',
67+
INPUT_DISABLED: 'disabled',
68+
INPUT_MIN: 'min',
69+
INPUT_MAX: 'max',
70+
INPUT_VALUE: 'value',
71+
INPUT_STEP: 'step',
6672
};
6773

6874
/** Slider events. */

‎packages/mdc-slider/foundation.ts‎

Lines changed: 39 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -118,8 +118,13 @@ export class MDCSliderFoundation extends MDCFoundation<MDCSliderAdapter> {
118118
addThumbClass: () => undefined,
119119
removeThumbClass: () => undefined,
120120
getAttribute: () => null,
121+
getInputValue: () => '',
122+
setInputValue: () => undefined,
121123
getThumbAttribute: () => null,
122124
setThumbAttribute: () => null,
125+
getInputAttribute: () => null,
126+
setInputAttribute: () => null,
127+
removeInputAttribute: () => null,
123128
getThumbKnobWidth: () => 0,
124129
isThumbFocused: () => false,
125130
focusThumb: () => undefined,
@@ -159,19 +164,19 @@ export class MDCSliderFoundation extends MDCFoundation<MDCSliderAdapter> {
159164
this.isRange = this.adapter.hasClass(cssClasses.RANGE);
160165

161166
const min = this.convertAttributeValueToNumber(
162-
this.adapter.getThumbAttribute(attributes.ARIA_VALUEMIN, Thumb.END),
163-
attributes.ARIA_VALUEMIN);
167+
this.adapter.getInputAttribute(
168+
attributes.INPUT_MIN, this.isRange ? Thumb.START : Thumb.END),
169+
attributes.INPUT_MIN);
164170
const max = this.convertAttributeValueToNumber(
165-
this.adapter.getThumbAttribute(attributes.ARIA_VALUEMAX, Thumb.END),
166-
attributes.ARIA_VALUEMAX);
171+
this.adapter.getInputAttribute(attributes.INPUT_MAX, Thumb.END),
172+
attributes.INPUT_MAX);
167173
const value = this.convertAttributeValueToNumber(
168-
this.adapter.getThumbAttribute(attributes.ARIA_VALUENOW, Thumb.END),
169-
attributes.ARIA_VALUENOW);
174+
this.adapter.getInputAttribute(attributes.INPUT_VALUE, Thumb.END),
175+
attributes.INPUT_VALUE);
170176
const valueStart = this.isRange ?
171177
this.convertAttributeValueToNumber(
172-
this.adapter.getThumbAttribute(
173-
attributes.ARIA_VALUENOW, Thumb.START),
174-
attributes.ARIA_VALUENOW) :
178+
this.adapter.getInputAttribute(attributes.INPUT_VALUE, Thumb.START),
179+
attributes.INPUT_VALUE) :
175180
min;
176181

177182
this.validateProperties({min, max, value, valueStart});
@@ -307,18 +312,24 @@ export class MDCSliderFoundation extends MDCFoundation<MDCSliderAdapter> {
307312
if (this.isRange) {
308313
this.adapter.setThumbAttribute('tabindex', '-1', Thumb.START);
309314
this.adapter.setThumbAttribute('aria-disabled', 'true', Thumb.START);
315+
this.adapter.setInputAttribute(
316+
attributes.INPUT_DISABLED, '', Thumb.START);
310317
}
311318
this.adapter.setThumbAttribute('tabindex', '-1', Thumb.END);
312319
this.adapter.setThumbAttribute('aria-disabled', 'true', Thumb.END);
320+
this.adapter.setInputAttribute(attributes.INPUT_DISABLED, '', Thumb.END);
313321
} else {
314322
this.adapter.removeClass(cssClasses.DISABLED);
315323

316324
if (this.isRange) {
317325
this.adapter.setThumbAttribute('tabindex', '0', Thumb.START);
318326
this.adapter.setThumbAttribute('aria-disabled', 'false', Thumb.START);
327+
this.adapter.removeInputAttribute(
328+
attributes.INPUT_DISABLED, Thumb.START);
319329
}
320330
this.adapter.setThumbAttribute('tabindex', '0', Thumb.END);
321331
this.adapter.setThumbAttribute('aria-disabled', 'false', Thumb.END);
332+
this.adapter.removeInputAttribute(attributes.INPUT_DISABLED, Thumb.END);
322333
}
323334
}
324335

@@ -615,23 +626,37 @@ export class MDCSliderFoundation extends MDCFoundation<MDCSliderAdapter> {
615626
* updated for both thumbs based on current internal state.
616627
*/
617628
private updateUI(thumb?: Thumb) {
618-
this.updateThumbAriaAttributes(thumb);
629+
this.updateThumbAndInputAttributes(thumb);
619630
this.updateThumbAndTrackUI(thumb);
620631
this.updateValueIndicatorUI(thumb);
621632
this.updateTickMarksUI();
622633
}
623634

624635
/**
625-
* Updates thumb aria attributes based on current value.
636+
* Updates thumb and input attributes based on current value.
626637
* @param thumb Thumb whose aria attributes to update.
627638
*/
628-
private updateThumbAriaAttributes(thumb?: Thumb) {
639+
private updateThumbAndInputAttributes(thumb?: Thumb) {
629640
if (!thumb) return;
630641

631642
const value =
632643
this.isRange && thumb === Thumb.START ? this.valueStart : this.value;
633-
this.adapter.setThumbAttribute(
634-
attributes.ARIA_VALUENOW, String(value), thumb);
644+
const valueStr = String(value);
645+
this.adapter.setInputAttribute(attributes.INPUT_VALUE, valueStr, thumb);
646+
if (this.isRange && thumb === Thumb.START) {
647+
this.adapter.setInputAttribute(attributes.INPUT_MIN, valueStr, Thumb.END);
648+
} else if (this.isRange && thumb === Thumb.END) {
649+
this.adapter.setInputAttribute(
650+
attributes.INPUT_MAX, valueStr, Thumb.START);
651+
}
652+
653+
// Sync attribute with property.
654+
if (this.adapter.getInputValue(thumb) !== valueStr) {
655+
this.adapter.setInputValue(valueStr, thumb);
656+
}
657+
658+
this.adapter.setThumbAttribute(attributes.ARIA_VALUENOW, valueStr, thumb);
659+
635660
const valueToAriaValueTextFn = this.adapter.getValueToAriaValueTextFn();
636661
if (valueToAriaValueTextFn) {
637662
this.adapter.setThumbAttribute(

0 commit comments

Comments
 (0)