{"componentChunkName":"component---src-pages-components-slider-usage-mdx","path":"/components/slider/usage/","result":{"pageContext":{"frontmatter":{"title":"Slider","description":"Sliders provide a visual indication of adjustable content, where the user can move the handle along a horizontal track to increase or decrease the value.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/slider/usage.mdx","titleType":"prepend","MdxNode":{"id":"ea99572c-e26e-50fe-876b-60839e0a5058","children":[],"parent":"87476b31-4bfa-55fc-8647-3bccfb488d83","internal":{"content":"---\ntitle: Slider\ndescription: Sliders provide a visual indication of adjustable content, where the user can move the handle along a horizontal track to increase or decrease the value.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## General guidance\n\n_Sliders_ provide a visual indication of adjustable content, where the user can move the handle along a horizontal track to increase or decrease the value.\n\nThe slider in its basic form should be accompanied by a label and a number input that doubles as a display for the slider's current value. The basic slider does **not** include discrete values, as the slider represents a percentage of 0-100. In this case it is not necessary for a user to choose a specific value, but instead generally increase or decrease an input. For example, the user increases the slider amount and the volume of the music gets louder. The more complex versions should be used for selecting a specific value within a value range.\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n
\n\n## Interaction\n\nUsers can choose a numerical value by:\n\n- Entering the exact value into the text field.\n- Moving the slider handle with their mouse, which automatically updates the value in the text input.\n- Using the ↑ ↓ ← → arrow keys automatically updates the value in the text input and moves the slider handle to the corresponding value.\n- The **step size increment** is how many increments the inputted value and slider handle will jump when using the arrow keys. Make sure to set the step size increments to reasonable values.\n- ↑ ↓ ← → changes the value by one step size increment. _Example: Pressing `→` changes the inputted value from 59 to 60, increasing the value by 1 unit._\n- `Shift` + ↑ ↓ ← → changes the value by 10 step size increments. _Example: Typing_ `Shift` + → _changes the value from 60 to 70, increasing the inputted value by 10 units._\n\n\n\n\n\n\n\n
\n\n## Best practices\n\n- The slider label should indicate what value the slider is changing.\n- Range values are used to describe the range in numbers.\n- Do not use for ranges that are extremely large _i.e. 1-1000_.\n- Do not use for ranges that are too small _i.e. 1-3_.\n","type":"Mdx","contentDigest":"4ae4b28c83e69fa9e934bc0affc9059e","counter":1574,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Slider","description":"Sliders provide a visual indication of adjustable content, where the user can move the handle along a horizontal track to increase or decrease the value.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Slider\ndescription: Sliders provide a visual indication of adjustable content, where the user can move the handle along a horizontal track to increase or decrease the value.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## General guidance\n\n_Sliders_ provide a visual indication of adjustable content, where the user can move the handle along a horizontal track to increase or decrease the value.\n\nThe slider in its basic form should be accompanied by a label and a number input that doubles as a display for the slider's current value. The basic slider does **not** include discrete values, as the slider represents a percentage of 0-100. In this case it is not necessary for a user to choose a specific value, but instead generally increase or decrease an input. For example, the user increases the slider amount and the volume of the music gets louder. The more complex versions should be used for selecting a specific value within a value range.\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n
\n\n## Interaction\n\nUsers can choose a numerical value by:\n\n- Entering the exact value into the text field.\n- Moving the slider handle with their mouse, which automatically updates the value in the text input.\n- Using the ↑ ↓ ← → arrow keys automatically updates the value in the text input and moves the slider handle to the corresponding value.\n- The **step size increment** is how many increments the inputted value and slider handle will jump when using the arrow keys. Make sure to set the step size increments to reasonable values.\n- ↑ ↓ ← → changes the value by one step size increment. _Example: Pressing `→` changes the inputted value from 59 to 60, increasing the value by 1 unit._\n- `Shift` + ↑ ↓ ← → changes the value by 10 step size increments. _Example: Typing_ `Shift` + → _changes the value from 60 to 70, increasing the inputted value by 10 units._\n\n\n\n\n\n\n\n
\n\n## Best practices\n\n- The slider label should indicate what value the slider is changing.\n- Range values are used to describe the range in numbers.\n- Do not use for ranges that are extremely large _i.e. 1-1000_.\n- Do not use for ranges that are too small _i.e. 1-3_.\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/slider/usage.mdx"}}}}