docs(Slider): add playground example, update step docs (carbon-design…

…-system#11993)

* docs(Slider): add playground example, update step docs

* docs(Slider): update PropType definition

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/react/src/components/Slider/Slider.js

@@ -149,7 +149,7 @@ export default class Slider extends PureComponent {
     required: PropTypes.bool,
 
     /**
-     * A value determining how much the value should increase/decrease by moving the thumb by mouse.
+     * A value determining how much the value should increase/decrease by moving the thumb by mouse. If a value other than 1 is provided and the input is *not* hidden, the new step requirement should be added to a visible label. Values outside of the `step` increment will be considered invalid.
      */
     step: PropTypes.number,
 

packages/react/src/components/Slider/next/Slider.mdx

@@ -26,6 +26,19 @@ increase or decrease the value by moving the handle along a horizontal track.
 
 ## Component API
 
+###
+
+### `step` Prop
+
+If a `step` value other than `1` is provided, any number entered into the text
+input must adhere to the step value. For example, if the `step` is `5`, with a
+range of values from `0-100`, `40` would be valid, and `42` would be considered
+`invalid`.
+
+<Preview>
+  <Story id="components-slider--playground" />
+</Preview>
+
 <Props />
 
 ## Feedback

packages/react/src/components/Slider/next/Slider.stories.js

@@ -6,12 +6,8 @@
  */
 
 import React, { useState } from 'react';
-// import { action } from '@storybook/addon-actions';
-
-// import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
 import { SliderSkeleton } from '../../Slider';
 import Slider from '../Slider';
-// import { sliderValuePropSync } from '../../../../react/src/internal/FeatureFlags';
 import { Layer } from '../../Layer';
 import mdx from './Slider.mdx';
 
@@ -22,9 +18,46 @@ export default {
     SliderSkeleton,
   },
   argTypes: {
+    light: {
+      table: {
+        disable: true,
+      },
+    },
+    children: {
+      table: {
+        disable: true,
+      },
+    },
     disabled: {
       control: { type: 'boolean' },
     },
+    labelText: {
+      control: { type: 'string' },
+      defaultValue: 'Slider (must be an increment of 5)',
+    },
+    min: {
+      control: { type: 'number' },
+      defaultValue: 0,
+    },
+    max: {
+      control: { type: 'number' },
+      defaultValue: 100,
+    },
+    required: {
+      control: { type: 'boolean' },
+    },
+    step: {
+      control: { type: 'number' },
+      defaultValue: 5,
+    },
+    stepMultiplier: {
+      control: { type: 'number' },
+      defaultValue: 5,
+    },
+    value: {
+      control: { type: 'number' },
+      defaultValue: 50,
+    },
   },
   parameters: {
     docs: {
@@ -46,6 +79,13 @@ export const Default = (args) => (
   />
 );
 
+export const Playground = (args) => (
+  <Slider
+    {...args}
+    labelText={`Slider (must be an increment of ${args.step})`}
+  />
+);
+
 Default.story = {
   name: 'Slider',
 };