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,56 @@
+import { attr } from '@ni/fast-element';
+import {
+    DesignSystem,
+    Slider as FoundationSlider,
+    type SliderOptions
+} from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-th-slider': Slider;
+    }
+}
+
+/**
+ * A Nimble-styled slider control.
+ */
+export class Slider extends FoundationSlider {
+    /**
+     * Whether the current value is displayed next to the thumb.
+     */
+    @attr({ attribute: 'value-visible', mode: 'boolean' })
+    public valueVisible = false;
+
+    /** @internal */
+    public valueLabel?: HTMLSpanElement;
+
+    /** @internal */
+    public override connectedCallback(): void {
+        super.connectedCallback();
+        this.updateValueLabel();
+    }
+
+    /** @internal */
+    public override valueChanged(previous: string, next: string): void {
+        super.valueChanged(previous, next);
+        this.updateValueLabel();
+    }
+
+    private updateValueLabel(): void {
+        if (this.valueLabel) {
+            this.valueLabel.textContent = this.value;
+        }
+    }
+}
+
+const okThSlider = Slider.compose<SliderOptions>({
+    baseName: 'th-slider',
+    baseClass: FoundationSlider,
+    template,
+    styles
+});
+
+DesignSystem.getOrCreate().withPrefix('ok').register(okThSlider());
+export const sliderTag = 'ok-th-slider';