Add OkThSlider component by Copilot · Pull Request #3048 · ni/nimble

Copilot · 2026-08-28T19:38:56Z

Pull Request

🤨 Rationale

Add a Nimble-styled OK slider backed by the FAST Foundation slider.

👩‍💻 Implementation

Added and registered ok-basic-slider under ok-components/src/basic.
Styled horizontal and vertical layouts using Nimble design tokens.
Covered hover, focus, active, readonly, and disabled states.
Added Storybook documentation and visual-state matrices.

🧪 Testing

Added construction and FAST template integration tests.

✅ Checklist

I have updated the project documentation to reflect my changes or determined no changes are needed.

Co-authored-by: atmgrifter00 <26874831+atmgrifter00@users.noreply.github.com>

atmgrifter00 · 2026-08-28T19:40:51Z

@copilot can we include the ok-react wrapper for this component as part of this PR?

Co-authored-by: atmgrifter00 <26874831+atmgrifter00@users.noreply.github.com>

Copilot · 2026-08-28T19:48:50Z

@copilot can we include the ok-react wrapper for this component as part of this PR?

Added the OkBasicSlider wrapper with typed onChange support and package change metadata in b0cb180.

rajsite · 2026-08-28T23:12:02Z

Approved the workflow runs

atmgrifter00 · 2026-08-29T18:07:39Z

@copilot When pressing the slider it looks like this:

I think we should adopt the same styling patterns seen in the switch control (see it's styling CSS file for reference: https://github.com/ni/nimble/blob/main/packages/nimble-components/src/switch/styles.ts.

Normal:

Hover:

Click:

The color of the track for the slider should also match that of the switch.

Co-authored-by: atmgrifter00 <26874831+atmgrifter00@users.noreply.github.com>

Copilot · 2026-08-29T18:17:49Z

@copilot When pressing the slider it looks like this:

...

Updated the thumb to use the switch indicator’s normal, hover, focus, active-inner, and disabled patterns, and matched the track to the switch’s theme-specific colors in 3577776.

atmgrifter00 · 2026-08-29T18:19:08Z

@copilot we also need to provide visual feedback for what the actual value is as you are changing it (perhaps tooltip next to the . We can provide this configuration via an attribute API. Additionally it would be nice to provide a fill effect on the slider from the minimum up to the current value. Let's start with using the $ni-nimble-fill-selected-color token for the fill color.

Co-authored-by: atmgrifter00 <26874831+atmgrifter00@users.noreply.github.com>

Copilot · 2026-08-29T18:29:42Z

@copilot we also need to provide visual feedback for what the actual value is as you are changing it (perhaps tooltip next to the . We can provide this configuration via an attribute API. Additionally...

Added value-visible for a live tooltip positioned beside and moving with the thumb, and changed the minimum-to-current fill to fillSelectedColor in ae9ad82.

atmgrifter00 · 2026-08-29T20:06:13Z

@copilot A few things to fix:

The thumb for the slider should not be showing the track behind it when in any mode (disabled or otherwise). The switch may have been able to get away with this because its track is the same size and color as the background of the thumb, but for the slider we can't do that, unless we can provide a mask image that removes the visuals behind the thumb. Let's also make the thumb size about 60% of its current size. We also should remove the visual box around the value. I would also like to see the min and max values to show up on the slider on hover.

Co-authored-by: atmgrifter00 <26874831+atmgrifter00@users.noreply.github.com>

Copilot · 2026-08-29T20:12:19Z

@copilot A few things to fix:

...

Made the thumb opaque in every state, reduced it from 24px to 14px, removed the value box styling, and added hover-only min/max labels at the track ends in 8d2ec57.

Copilot · 2026-08-30T14:41:54Z

@copilot While the fill is going in the right direction, the thumb is now positioned improperly for its value. In addition to the thumb being placed under its proper place, you can also see that the v...

Aligned the vertical thumb with the fill boundary by correcting its transform, and changed the matrix/test value to 4 so the non-middle position is verified. Addressed in 5e25b2a.

rajsite · 2026-08-30T20:18:45Z

+        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


(non-blocking) gonna guess llm is fighting with custom element restrictions on what you can do in a constructor. resulting in these weird access patterns. The usual way to handle this is to do things that require messing with the DOM in connectedCallback instead as described in that spec note:

In general, work should be deferred to connectedCallback as much as possible—especially work involving fetching resources or rendering. However, note that connectedCallback can be called more than once, so any initialization work that is truly one-time will need a guard to prevent it from running twice.

(non-blocking) Oh actually, think I'm wrong, it's the llm trying to get access to private methods in the base class:

https://github.com/ni/fast/blob/02ccd24d9d3d3f53566e7c9c359888141474af4f/packages/web-components/fast-foundation/src/slider/slider.ts#L473

https://github.com/ni/fast/blob/02ccd24d9d3d3f53566e7c9c359888141474af4f/packages/web-components/fast-foundation/src/slider/slider.ts#L527

If actually really needed, dunno if a sane workaround, may be better to make a small PR to foundation to mark them /** @internal */ public instead. Or just merge as-is. Up to you

rajsite · 2026-08-30T21:31:11Z

+        ${display('inline-block')}
+
+        :host {
+            width: 100%;


(non-blocking) Form style controls (as opposed to block level paragraph or inline text style controls) generally have some reasonable arbitrary width by default as opposed to filling 100% of the parent. Could consider menuMinWidth (which is already a bit abused for that) or a value that feels right

rajsite · 2026-08-30T21:31:25Z

+            width: 100%;
+            /* Three thumb widths allow three non-overlapping slider positions. */
+            min-width: 42px;
+            height: 32px;


(non-blocking) This one we are more consistent on, controlHeight

rajsite · 2026-08-30T21:33:00Z

+            width: 32px;
+            min-width: 32px;
+            height: 100%;


(non-blocking) similar considerations as above

rajsite · 2026-08-30T21:45:46Z

@@ -22,6 +22,8 @@
 /**/Ts/** @jattasNI


Pretty much there. Question around accessing internal apis and gave some style feedback since was in the area but generally nimble owners won't be doing reviews of ok component content and focus on repo layout / infra.
Other repo layout considerations:

(infra, please update) keeping status table up to date for th components, following ok ts / ok fv patterns:

nimble/packages/storybook/src/docs/component-status.stories.ts

Line 34 in 76640ba

...componentDataOkTs,

(non-blocking) since you have wrappers, adding to the react example app:

nimble/packages/react-workspace/react-client-app/src/components/App.tsx

Line 113 in 76640ba

<FvSection />

rajsite · 2026-08-30T22:00:20Z

+<Meta of={sliderStories} />
+<Title of={sliderStories} />
+
+A Nimble-styled TestHub slider based on the FAST Foundation slider.


(non-blocking) The llm inferred what TH stood for :P Dunno if you want the term TestHub here or have it use ThSlider instead (same in the change file description).

jattasNI

Structure looks fine, all comments are because I can't stop myself from applying a higher bar to reviews, you don't have to address any of them for the ok level of quality

jattasNI · 2026-08-31T13:35:25Z

+            show-min-max="${x => x.showMinMax}"
+        ></${thSliderTag}>
+    `),
+    argTypes: {


It'd be great to add description for all of these. Many can probably be copied from other controls like nimble number field.

Especially important to note the behavior of value: it's the initial value not the current value.

jattasNI · 2026-08-31T13:37:53Z

+    orientation === 'horizontal' ? `width: ${sliderSize};` : `height: ${sliderSize};`
+);
+
+const component = (


Would be good to include the min/max/value visibility as states too

jattasNI · 2026-08-31T13:40:56Z

@@ -0,0 +1,7 @@
+{


Totally up to you whether these are in scope, but a few things I noticed that might be useful for others:

label

error state

Angular wrappers

Blazor wrappers

jattasNI · 2026-08-31T13:44:58Z

+        expect(document.createElement(thSliderTag)).toBeInstanceOf(ThSlider);
+    });
+
+    it('provides the FAST Foundation slider template', async () => {


Looks like we forked the template

Suggested change

it('provides the FAST Foundation slider template', async () => {

it('provides the expected slider template contents', async () => {

Add OK basic slider component

016dd15

Co-authored-by: atmgrifter00 <26874831+atmgrifter00@users.noreply.github.com>

Copilot AI assigned Copilot and atmgrifter00 Aug 28, 2026

Copilot created this pull request from a session on behalf of atmgrifter00 August 28, 2026 19:38 View session

Copilot started work on behalf of atmgrifter00 August 28, 2026 19:41 View session

Add OK React slider wrapper

b0cb180

Co-authored-by: atmgrifter00 <26874831+atmgrifter00@users.noreply.github.com>

Copilot finished work on behalf of atmgrifter00 August 28, 2026 19:49

Copilot AI requested a review from atmgrifter00 August 28, 2026 19:49

rajsite reviewed Aug 28, 2026

View reviewed changes

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

Copilot started work on behalf of atmgrifter00 August 29, 2026 18:02 View session

Scope slider to TestHub namespace

dbbf9a5

Co-authored-by: atmgrifter00 <26874831+atmgrifter00@users.noreply.github.com>

Copilot finished work on behalf of atmgrifter00 August 29, 2026 18:10

Copilot started work on behalf of atmgrifter00 August 29, 2026 18:11 View session

Align slider visuals with switch

3577776

Co-authored-by: atmgrifter00 <26874831+atmgrifter00@users.noreply.github.com>

Copilot finished work on behalf of atmgrifter00 August 29, 2026 18:18

Copilot started work on behalf of atmgrifter00 August 29, 2026 18:19 View session

Add slider value feedback

ae9ad82

Co-authored-by: atmgrifter00 <26874831+atmgrifter00@users.noreply.github.com>

Copilot finished work on behalf of atmgrifter00 August 29, 2026 18:30

Copilot started work on behalf of atmgrifter00 August 29, 2026 20:06 View session

Refine slider thumb and labels

8d2ec57

Co-authored-by: atmgrifter00 <26874831+atmgrifter00@users.noreply.github.com>

Copilot finished work on behalf of atmgrifter00 August 29, 2026 20:12

Copilot started work on behalf of atmgrifter00 August 30, 2026 14:37 View session

Copilot finished work on behalf of atmgrifter00 August 30, 2026 14:42

Copilot started work on behalf of atmgrifter00 August 30, 2026 14:44 View session

Copilot finished work on behalf of atmgrifter00 August 30, 2026 14:48

Copilot started work on behalf of atmgrifter00 August 30, 2026 14:53 View session

Copilot finished work on behalf of atmgrifter00 August 30, 2026 14:56

atmgrifter00 force-pushed the copilot/add-ok-component-for-fast-slider branch from 8383c47 to e93ac86 Compare August 30, 2026 15:02

Fix vertical slider.

03fdb3f

rajsite reviewed Aug 30, 2026

View reviewed changes

Comment thread packages/ok-components/src/th/slider/tests/th-slider.spec.ts

rajsite reviewed Aug 30, 2026

View reviewed changes

Comment thread packages/ok-components/src/th/slider/tests/slider.spec.ts Outdated

rajsite reviewed Aug 30, 2026

View reviewed changes

Comment thread packages/ok-components/src/th/slider/index.ts Outdated

rajsite reviewed Aug 30, 2026

View reviewed changes

Comment thread packages/ok-components/src/th/slider/index.ts Outdated

rajsite reviewed Aug 30, 2026

View reviewed changes

Comment thread packages/react-workspace/ok-react/src/th/slider/index.ts Outdated

rajsite reviewed Aug 30, 2026

View reviewed changes

Comment thread packages/storybook/src/ok/th/slider/th-slider-matrix.stories.ts

rajsite reviewed Aug 30, 2026

View reviewed changes

Comment thread packages/storybook/src/ok/th/slider/th-slider.mdx

rajsite reviewed Aug 30, 2026

View reviewed changes

Comment thread packages/storybook/src/ok/th/slider/th-slider.stories.ts

atmgrifter00 added 2 commits August 30, 2026 15:36

Add showMinMax and fix some styling issues.

4223a27

Handling PR feedback.

bac0c01

rajsite changed the title ~~Add OK basic slider component~~ Add OkThSlider component Aug 30, 2026

Merge branch 'main' into copilot/add-ok-component-for-fast-slider

18b1fa6

rajsite reviewed Aug 30, 2026

View reviewed changes

jattasNI approved these changes Aug 31, 2026

View reviewed changes

rajsite approved these changes Aug 31, 2026

View reviewed changes

atmgrifter00 marked this pull request as draft September 8, 2026 21:12

	it('provides the FAST Foundation slider template', async () => {
	it('provides the expected slider template contents', async () => {

Conversation

Copilot AI commented Aug 28, 2026

Pull Request

🤨 Rationale

👩‍💻 Implementation

🧪 Testing

✅ Checklist

Uh oh!

atmgrifter00 commented Aug 28, 2026

Uh oh!

Copilot AI commented Aug 28, 2026

Uh oh!

Uh oh!

rajsite commented Aug 28, 2026

Uh oh!

atmgrifter00 commented Aug 29, 2026

Uh oh!

Copilot AI commented Aug 29, 2026

Uh oh!

atmgrifter00 commented Aug 29, 2026

Uh oh!

Copilot AI commented Aug 29, 2026

Uh oh!

atmgrifter00 commented Aug 29, 2026

Uh oh!

Copilot AI commented Aug 29, 2026

Uh oh!

Copilot AI commented Aug 30, 2026

Uh oh!

Uh oh!

rajsite Aug 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rajsite Aug 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rajsite Aug 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rajsite Aug 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rajsite Aug 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rajsite Aug 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rajsite Aug 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jattasNI left a comment

Choose a reason for hiding this comment

Uh oh!

jattasNI Aug 31, 2026

Choose a reason for hiding this comment

Uh oh!

jattasNI Aug 31, 2026

Choose a reason for hiding this comment

Uh oh!

jattasNI Aug 31, 2026

Choose a reason for hiding this comment

Uh oh!

jattasNI Aug 31, 2026

Choose a reason for hiding this comment

Uh oh!

rajsite Aug 30, 2026 •

edited

Loading

rajsite Aug 30, 2026 •

edited

Loading

rajsite Aug 30, 2026 •

edited

Loading

rajsite Aug 30, 2026 •

edited

Loading

rajsite Aug 30, 2026 •

edited

Loading

rajsite Aug 30, 2026 •

edited

Loading

rajsite Aug 30, 2026 •

edited

Loading