add webui-range-input

ui/src/javascript/ui-init.ts

@@ -1,7 +1,6 @@
 // Dependencies.
 // 1. Modules.
 import FormValidate from './modules/form-validate';
-import RangeSlider from './modules/range-slider';
 import Search from './modules/search';
 import Slider from './modules/slider';
 
@@ -14,14 +13,14 @@ import WebUIMakeClickable from './web-components/webui-make-clickable';
 import WebUIModal from './web-components/webui-modal';
 import WebUINotify from './web-components/webui-notify';
 import WebUIProse from './web-components/webui-prose';
+import WebUIRangeInput from './web-components/webui-range-input';
 import WebUIShare from './web-components/webui-share';
 import WebUIToggle from './web-components/webui-toggle';
 import WebUITabs from './web-components/webui-tabs';
 import WebUIVideoPlayer from './web-components/webui-video-player';
 
 export const uiInit = (): void => {
     FormValidate.start();
-    RangeSlider.start();
     Search.start();
     Slider.start();
 
@@ -39,6 +38,8 @@ export const uiInit = (): void => {
         customElements.define('webui-notify', WebUINotify);
     !customElements.get('webui-prose') &&
         customElements.define('webui-prose', WebUIProse);
+    !customElements.get('webui-range-input') &&
+        customElements.define('webui-range-input', WebUIRangeInput);
     !customElements.get('webui-share') &&
         customElements.define('webui-share', WebUIShare);
     !customElements.get('webui-tabs') &&

ui/src/javascript/web-components/webui-range-input.ts

@@ -0,0 +1,32 @@
+export default class WebUIRangeInput extends HTMLElement {
+    private rangeInput: HTMLInputElement | null;
+    private rangeOutput: HTMLOutputElement | null;
+
+    constructor() {
+        super();
+
+        this.rangeInput = this.querySelector('[type="range"]');
+        this.rangeOutput = this.querySelector('output');
+
+        if (!this.rangeInput || !this.rangeOutput) return;
+
+        this.rangeOutput.innerHTML = this.rangeInput.value;
+        this.rangeInput.addEventListener('input', this);
+    }
+
+    private handleValidRanges(
+        range: HTMLInputElement,
+        bubble: HTMLOutputElement,
+    ): void {
+        range.setAttribute('value', range.value);
+        range.setAttribute('aria-valuenow', range.value);
+        bubble.innerHTML = range.value;
+    }
+
+    // Handle constructor() event listeners.
+    handleEvent() {
+        this.rangeInput &&
+            this.rangeOutput &&
+            this.handleValidRanges(this.rangeInput, this.rangeOutput);
+    }
+}

ui/src/javascript/web-components/webui-toggle.ts

@@ -3,7 +3,7 @@ export default class WebUIToggle extends HTMLElement {
 
     constructor() {
         super();
-        this.switch = this.querySelector('[role="switch"]');
+        this.switch = this.querySelector('[role=switch]');
 
         if (!this.switch) return;
 

ui/src/stylesheets/form/_index.scss

@@ -4,6 +4,5 @@
 @use 'input';
 @use 'label';
 @use 'radio';
-@use 'range';
 @use 'select';
 @use 'textarea';

ui/src/stylesheets/web-components/_index.scss

@@ -3,6 +3,7 @@
 @use 'webui-modal';
 @use 'webui-notify';
 @use 'webui-prose';
+@use 'webui-range-input-slider';
 @use 'webui-share';
 @use 'webui-tabs';
 @use 'webui-toggle';

ui/src/stylesheets/form/_range.scss → ui/src/stylesheets/web-components/_webui-range-input-slider.scss

@@ -23,8 +23,8 @@ Dependencies.
     block-size: var(--slider-height);
 }
 
-.range {
-    &__bubble {
+webui-range-input-slider {
+    output {
         margin-inline: auto;
     }
 }

ui/stories/6. Web Components Or Custom Elements/WebUI Range Input/WebUIRangeInput.js

@@ -0,0 +1,21 @@
+export const WebUIRangeInputHtml = () => `
+<webui-range-input>
+    <div class="form__field">
+        <label for="range-input" class="label">
+            Range slider
+        </label>
+        <input
+            class="input"
+            type="range"
+            id="range-input"
+            value="1"
+            min="1"
+            max="10"
+            aria-valuenow="1"
+            aria-valuemin="1"
+            aria-valuemax="10"
+        />
+        <output></output>
+    </div>
+</webui-range-input>
+`;

ui/stories/6. Web Components Or Custom Elements/WebUI Range Input/WebUIRangeInput.mdx

@@ -0,0 +1,12 @@
+import { Meta, Canvas } from '@storybook/blocks';
+import * as WebUIRangeInput from './WebUIRangeInput.stories';
+
+<Meta of={WebUIRangeInput} />
+
+# `<webui-range-input>`
+- JavaScript is required to display the numeric range value inside the `<output>` element.
+
+## Accessibility considerations
+- See the [ARIA APG slider pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/).
+
+<Canvas of={WebUIRangeInput.WebUIRangeInput} />

ui/stories/6. Web Components Or Custom Elements/WebUI Range Input/WebUIRangeInput.stories.js

@@ -0,0 +1,15 @@
+import { WebUIRangeInputHtml } from './WebUIRangeInput';
+
+export default {
+    title: 'Web Components Or Custom Elements/<webui-range-input>',
+    parameters: {
+        status: {
+            type: 'stable',
+        },
+    },
+};
+
+export const WebUIRangeInput = {
+    render: (args) => WebUIRangeInputHtml(args),
+};
+WebUIRangeInput.storyName = '<webui-range-input>';