[chore]: add slider example that displays current value (#34399)

Author: eljefe223

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

@@ -1,4 +1,4 @@
-import { html } from '@microsoft/fast-element';
+import { html, ref } from '@microsoft/fast-element';
 import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { SliderOrientation as SliderSetOrientation, SliderSize as SliderSetSize } from './slider.options.js';
 import type { Slider as FluentSlider } from './slider.js';
@@ -100,6 +100,18 @@ export const MediumSize: Story = {
   },
 };
 
+export const SliderWithValue: Story = {
+  render: renderComponent(html`
+    <fluent-field label-position="above">
+      <label slot="label" for="slider-in-field">Slider value</label>
+      <fluent-slider slot="input" id="slider-in-field" ${ref('slider')}></fluent-slider>
+      <fluent-text slot="message" size="200">
+        Current value: <output :value="${x => x.slider.value}"></output>
+      </fluent-text>
+    </fluent-field>
+  `),
+};
+
 export const MinMax: Story = {
   args: {
     // @ts-expect-error Slider attrs are typed as strings??