feat(slider): support two knobs option

packages/carbon-web-components/src/components/slider/slider-input.ts

@@ -45,12 +45,13 @@ class CDSSliderInput extends FocusMixin(LitElement) {
    * Handles `change` event to fire a normalized custom event.
    */
   private _handleChange({ target }: Event) {
+    this.value = Number((target as HTMLInputElement).value);
     this.dispatchEvent(
       new CustomEvent((this.constructor as typeof CDSSliderInput).eventChange, {
         bubbles: true,
         composed: true,
         detail: {
-          value: Number((target as HTMLInputElement).value),
+          value: this.value,
         },
       })
     );
@@ -60,12 +61,13 @@ class CDSSliderInput extends FocusMixin(LitElement) {
    * Handles `input` event to fire a normalized custom event.
    */
   private _handleInput({ target }: Event) {
+    this.value = Number((target as HTMLInputElement).value);
     this.dispatchEvent(
       new CustomEvent((this.constructor as typeof CDSSliderInput).eventChange, {
         bubbles: true,
         composed: true,
         detail: {
-          value: Number((target as HTMLInputElement).value),
+          value: this.value,
           intermediate: true,
         },
       })
@@ -164,7 +166,6 @@ class CDSSliderInput extends FocusMixin(LitElement) {
       _handleChange: handleChange,
       _handleInput: handleInput,
     } = this;
-
     const classes = classMap({
       [`${prefix}--text-input`]: true,
       [`${prefix}--slider-text-input`]: true,
@@ -179,7 +180,6 @@ class CDSSliderInput extends FocusMixin(LitElement) {
     const warnIcon = WarningAltFilled16({
       class: `${prefix}--slider__invalid-icon ${prefix}--slider__invalid-icon--warning`,
     });
-
     return html`
       <input
         ?disabled="${disabled}"

packages/carbon-web-components/src/components/slider/slider-story.ts

@@ -115,6 +115,30 @@ export const WithLayer = () => {
   `;
 };
 
+export const TwoHandleSlider = () => {
+  return html`
+    <cds-form-item>
+      <cds-slider
+        label-text="Slider Label"
+        max="100"
+        min="0"
+        step="1"
+        value="10"
+        value-upper="90">
+        <cds-slider-input
+          aria-label="Lower bound"
+          type="number"
+          id="lower"
+          slot="lower-input"></cds-slider-input>
+        <cds-slider-input
+          aria-label="Upper bound"
+          type="number"
+          id="upper"></cds-slider-input>
+      </cds-slider>
+    </cds-form-item>
+  `;
+};
+
 export const skeleton = () =>
   html`
     <cds-form-item><cds-slider-skeleton></cds-slider-skeleton></cds-form-item>

packages/carbon-web-components/src/components/slider/slider.scss

@@ -53,3 +53,11 @@ $css--plex: true !default;
     background-color: transparent;
   }
 }
+.#{$prefix}--slider__thumb-wrapper:focus-within
+  .#{$prefix}--slider__thumb-icon {
+  display: none;
+}
+.#{$prefix}--slider__thumb-wrapper:focus-within
+  .#{$prefix}--slider__thumb-icon--focus {
+  display: block;
+}