Adds Slider as a web component

change/@fluentui-web-components-a3ffbc3c-8b89-4d1c-ba56-3690c7fb06e1.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Adds Slider as a web component",
+  "packageName": "@fluentui/web-components",
+  "email": "ryan@ryanmerrill.net",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/progress-bar/progress-bar.styles.ts

@@ -13,7 +13,7 @@ import {
   colorPaletteRedBackground3,
 } from '../theme/design-tokens.js';
 
-/** Text styles
+/** ProgressBar styles
  * @public
  */
 export const styles = css`

packages/web-components/src/slider/define.ts

@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './slider.definition.js';
+
+definition.define(FluentDesignSystem.registry);

packages/web-components/src/slider/index.ts

@@ -0,0 +1,5 @@
+export * from './slider.js';
+export * from './slider.options.js';
+export { definition as SliderDefinition } from './slider.definition.js';
+export { styles as SliderStyles } from './slider.styles.js';
+export { template as SliderTemplate } from './slider.template.js';

packages/web-components/src/slider/slider.definition.ts

@@ -0,0 +1,18 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { Slider } from './slider.js';
+import { styles } from './slider.styles.js';
+import { template } from './slider.template.js';
+
+/**
+ * The Fluent Slider Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-slider\>
+ */
+export const definition = Slider.compose({
+  name: `${FluentDesignSystem.prefix}-slider`,
+  template,
+  styles,
+});

packages/web-components/src/slider/slider.options.ts

@@ -0,0 +1,16 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+
+/**
+ * SliderSize Constants
+ * @public
+ */
+export const SliderSize = {
+  small: 'small',
+  medium: 'medium',
+} as const;
+
+/**
+ * Applies bar height to the slider rail and diameter to the slider thumbs
+ * @public
+ */
+export type SliderSize = ValuesOf<typeof SliderSize>;

packages/web-components/src/slider/slider.spec.md

@@ -75,7 +75,6 @@ None
   - no `defaultValue` or `value` attributes, instead only `current-value` that specifies the selected range of the slider
   - `rail` is in Fluent React; `track` is in FAST Foundation
   - No value indicators to the left/right of slider in FAST Slider. These should be present in Fluent version. This will be handled through slotting in the the SliderLabel component.
-  - No default support for the ticks on the slider when `step` is set. This will be handled through slotting in the SliderLabel component.
 - [x] [Fluent UI React V9 Storybook](https://aka.ms/fluentui-storybook) for implementation differences and document
   - [Fluent React V9 Slider](https://master--628d031b55e942004ac95df1.chromatic.com/?path=/docs/components-slider--default)
 - [x] [Open GitHub issues related to component](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#find-open-issues-on-github)

packages/web-components/src/slider/slider.stories.ts

@@ -0,0 +1,81 @@
+import { html } from '@microsoft/fast-element';
+import type { Args, Meta } from '@storybook/html';
+import { renderComponent } from '../helpers.stories.js';
+import { SliderSize } from './slider.options.js';
+import type { Slider as FluentSlider } from './slider.js';
+import './define.js';
+
+type SliderStoryArgs = Args & FluentSlider;
+type SliderStoryMeta = Meta<SliderStoryArgs>;
+
+const storyTemplate = html<SliderStoryArgs>`
+  <fluent-slider
+    ?disabled=${x => x.disabled}
+    ?readonly=${x => x.readOnly}
+    step=${x => x.step}
+    size=${x => x.size}
+    min=${x => x.min}
+    max=${x => x.max}
+    orientation=${x => x.orientation}
+    value=${x => x.value}
+  ></fluent-slider>
+`;
+
+export default {
+  title: 'Components/Slider',
+  args: {
+    disabled: false,
+    readOnly: false,
+    min: 0,
+    max: 100,
+    size: SliderSize.medium,
+    orientation: 'horizontal',
+  },
+  argTypes: {
+    disabled: { control: 'boolean' },
+    readOnly: { control: 'boolean' },
+    min: {
+      control: 'number',
+      defaultValue: 0,
+    },
+    max: {
+      control: 'number',
+      defaultValue: 100,
+    },
+    value: { control: 'number', defaultValue: 50 },
+    size: {
+      control: {
+        type: 'inline-radio',
+        options: Object.values(SliderSize),
+      },
+    },
+    orientation: {
+      control: {
+        type: 'inline-radio',
+        options: ['horizontal', 'vertical'],
+      },
+    },
+  },
+} as SliderStoryMeta;
+
+export const Slider = renderComponent(storyTemplate).bind({});
+
+export const SliderVertical = renderComponent(html<SliderStoryArgs>`
+  <fluent-slider orientation="vertical" step="20" value="60" min="0" max="100"></fluent-slider>
+`);
+
+export const SliderSmall = renderComponent(html<SliderStoryArgs>`
+  <fluent-slider size="small" value="10" min="0" max="10"></fluent-slider>
+`);
+
+export const SliderSteps = renderComponent(html<SliderStoryArgs>`
+  <fluent-slider step="10" value="10" min="0" max="100"></fluent-slider>
+`);
+
+export const SliderDisabled = renderComponent(html<SliderStoryArgs>`
+  <fluent-slider disabled value="10" min="0" max="100"></fluent-slider>
+`);
+
+export const SliderDisabledWithSteps = renderComponent(html<SliderStoryArgs>`
+  <fluent-slider step="25" disabled value="50" min="0" max="100"></fluent-slider>
+`);