Add OkThSlider component

.github/CODEOWNERS

@@ -22,6 +22,8 @@
 /**/Ts/** @jattasNI
 /**/fv/** @jattasNI @fredvisser
 /**/Fv/** @jattasNI @fredvisser
+/**/th/** @atmgrifter00
+/**/Th/** @atmgrifter00
 /packages/nimble-tokens @rajsite @jattasNI @fredvisser
 /packages/storybook/.storybook @rajsite @jattasNI @fredvisser
 

change/@ni-ok-components-235da122-2e5b-42cd-a1f9-52751ccbff2b.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add the TestHub slider component",
+  "packageName": "@ni/ok-components",
+  "email": "198982749+Copilot@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

change/@ni-ok-react-7f04b43d-439e-4848-b394-511e0909be4d.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add React wrapper for the TestHub slider",
+  "packageName": "@ni/ok-react",
+  "email": "198982749+Copilot@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/ok-components/package.json

@@ -44,6 +44,7 @@
     "@ni/fast-foundation": "^10.2.5",
     "@ni/fast-web-utilities": "^10.0.0",
     "@ni/nimble-components": "^35.13.0",
+    "@ni/nimble-tokens": "^8.19.0",
     "@ni/spright-components": "^6.22.0",
     "tslib": "^2.2.0"
   },

packages/ok-components/src/all-components.ts

@@ -6,6 +6,7 @@
 
 import '@ni/spright-components/dist/esm/all-components';
 
+import './th/all-th';
 import './fv/all-fv';
 import './ex/all-ex';
 import './ts/all-ts';

packages/ok-components/src/th/all-th.ts

@@ -0,0 +1 @@
+import './slider';

packages/ok-components/src/th/slider/index.ts

@@ -0,0 +1,111 @@
+import { attr } from '@ni/fast-element';
+import {
+    DesignSystem,
+    Slider as FoundationSlider,
+    type SliderOptions
+} from '@ni/fast-foundation';
+import { Orientation } from '@ni/fast-web-utilities';
+import { styles } from './styles';
+import { template } from './template';
+import { ThSliderShowMinMax } from './types';
+
+export { ThSliderShowMinMax };
+
+interface FoundationSliderInternals {
+    calculateNewValue: (rawValue: number) => number;
+    convertToConstrainedValue: (value: number) => number;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-th-slider': ThSlider;
+    }
+}
+
+/**
+ * A Nimble-styled slider control.
+ */
+export class ThSlider extends FoundationSlider {
+    /**
+     * Whether the current value is displayed next to the thumb.
+     */
+    @attr({ attribute: 'value-visible', mode: 'boolean' })
+    public valueVisible = false;
+
+    /**
+     * Controls when the minimum and maximum value labels are displayed.
+     */
+    @attr({ attribute: 'show-min-max' })
+    public showMinMax: ThSliderShowMinMax = ThSliderShowMinMax.hover;
+
+    /** @internal */
+    public valueLabel?: HTMLSpanElement;
+
+    private verticalMappingInitialized = false;
+
+    /** @internal */
+    public override connectedCallback(): void {
+        super.connectedCallback();
+
+        if (!this.verticalMappingInitialized) {
+            const internals = this as unknown as FoundationSliderInternals;
+            const calculateFoundationValue = internals.calculateNewValue;
+            internals.calculateNewValue = rawValue => calculateFoundationValue(
+                this.orientation === Orientation.vertical
+                    ? this.trackMinHeight + this.trackHeight - rawValue
+                    : rawValue
+            );
+            this.verticalMappingInitialized = true;
+        }
+
+        this.updateValueLabel();
+    }
+
+    /** @internal */
+    public override valueChanged(previous: string, next: string): void {
+        super.valueChanged(previous, next);
+        this.updateValueLabel();
+    }
+
+    /** @internal */
+    public override increment(): void {
+        if (this.orientation !== Orientation.vertical) {
+            super.increment();
+            return;
+        }
+
+        this.setVerticalValue(Number(this.value) + Number(this.step));
+    }
+
+    /** @internal */
+    public override decrement(): void {
+        if (this.orientation !== Orientation.vertical) {
+            super.decrement();
+            return;
+        }
+
+        this.setVerticalValue(Number(this.value) - Number(this.step));
+    }
+
+    private setVerticalValue(value: number): void {
+        const internals = this as unknown as FoundationSliderInternals;
+        const constrainedValue = internals.convertToConstrainedValue(value);
+        this.value = `${Math.min(this.max, Math.max(this.min, constrainedValue))}`;
+    }
+
+    private updateValueLabel(): void {
+        if (this.valueLabel) {
+            this.valueLabel.textContent = this.value;
+        }
+    }
+}
+
+const okThSlider = ThSlider.compose<SliderOptions>({
+    baseName: 'th-slider',
+    baseClass: FoundationSlider,
+    template,
+    styles
+});
+
+DesignSystem.getOrCreate().withPrefix('ok').register(okThSlider());
+export const thSliderTag = 'ok-th-slider';