Add OK basic slider component

[Copilot]

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.

[atmgrifter00]

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

[Copilot]

@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]

Approved the workflow runs

[atmgrifter00]

@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.

[Copilot]

@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]

@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.

[Copilot]

@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]

@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.

[Copilot]

@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.

[atmgrifter00]

@copilot when you hover over the thumb the value text above the thumb shifts slightly down. We should ensure that it does not change position on hover.

[Copilot]

@copilot when you hover over the thumb the value text above the thumb shifts slightly down. We should ensure that it does not change position on hover.

Kept the thumb border geometry constant and moved the extra hover/focus emphasis to an inset shadow, so the value text no longer shifts. Addressed in 26c2893.

[atmgrifter00]

@copilot why are you setting an explicit width here? Most of the nimble-components do not do this, and allow themselves to fit the width of the parent they are placed within. Providing a min-width may make sense (I think I would do 3 times the width of the thumb, such that the thumb could have 3 discrete values to snap to where the thumb visual wouldn't overlap itself at any of the steps.

[atmgrifter00]

@copilot This applies to the height when oriented vertically.

[Copilot]

The 240px width came from the initial standalone presentation and was not a component requirement. I replaced it with parent-responsive width: 100% and a 42px minimum (three 14px thumb widths), while keeping vertical cross-axis sizing independent. Addressed in 10dd851.

[atmgrifter00]

@copilot Let's make one other adjustment: make the fill color for the track from the minimum to the thumb the same as the highlight of the thumb when pressed.

[Copilot]

@copilot Let's make one other adjustment: make the fill color for the track from the minimum to the thumb the same as the highlight of the thumb when pressed.

Updated the selected track segment to share the pressed thumb’s theme-specific highlight color, while preserving the disabled override. Addressed in 0d040d0.

[atmgrifter00]

@copilot let's make a slight adjustment and show the min and max values either during hover or while the slider is being operated (clicked).

[Copilot]

@copilot let's make a slight adjustment and show the min and max values either during hover or while the slider is being operated (clicked).

Updated the range labels to remain visible while the slider is active/clicked. Addressed in 179c2e2.