diff --git a/packages/react/src/components/Slider/Slider.js b/packages/react/src/components/Slider/Slider.js
index fd0ba7b59acf..d80fa07cdb28 100644
--- a/packages/react/src/components/Slider/Slider.js
+++ b/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,
diff --git a/packages/react/src/components/Slider/next/Slider.mdx b/packages/react/src/components/Slider/next/Slider.mdx
index 99d671962ce5..91940192b2ac 100644
--- a/packages/react/src/components/Slider/next/Slider.mdx
+++ b/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`.
+
+
+
+
+
## Feedback
diff --git a/packages/react/src/components/Slider/next/Slider.stories.js b/packages/react/src/components/Slider/next/Slider.stories.js
index 3b5b50402366..c6ff2a157599 100644
--- a/packages/react/src/components/Slider/next/Slider.stories.js
+++ b/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) => (
+
+);
+
Default.story = {
name: 'Slider',
};