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', };