docs(read-only): slider docs (#3444)

* update usage.mdx

* update style.mdx

* update usage.mdx

* update style.mdx

* add anchor link

* update usage

* update states images

* chore yarn format

* update interactions

* chore(git): remove unwanted file changes

* chore(tile): remove added tile files

---------

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

src/pages/components/slider/style.mdx

@@ -10,7 +10,7 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 | Element       | Property         | Color token         |
 | ------------- | ---------------- | ------------------- |
-| Slider thumb  | fill             | `$icon-primary`     |
+| Thumb         | fill             | `$icon-primary`     |
 | Track         | background-color | `$border-subtle` \* |
 | Track: filled | background-color | `$border-inverse`   |
 | Label         | text color       | `$text-secondary`   |
@@ -21,16 +21,47 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
   it is placed on.
 </Caption>
 
+<Row>
+<Column colLg={8}>
+
+![Slider enabled state](images/slider-style-color.png)
+
+</Column>
+</Row>
+
 ### Interactive states
 
-| Element        | Property         | Color token        |
-| -------------- | ---------------- | ------------------ |
-| Thumb:focus    | border           | `$focus`           |
-| Thumb:active   | fill             | `$interactive`     |
-| Track:active   | background-color | `$interactive`     |
-| Label:disabled | text color       | `$text-disabled`   |
-| Thumb:disabled | fill             | `$border-disabled` |
-| Track:disabled | background-color | `$border-disabled` |
+Slider uses a text input to type in values. See
+[text input](https://carbondesignsystem.com/components/text-input/usage/#states)
+for more information on its interactive states.
+
+| State     | Element      | Property         | Color token         |
+| --------- | ------------ | ---------------- | ------------------- |
+| Focus     | Thumb        | border           | `$focus`            |
+|           | Track        | background-color | `$interactive`      |
+| Active    | Thumb        | fill             | `$interactive`      |
+|           | Track        | background-color | `$interactive`      |
+| Disabled  | Label        | text color       | `$text-disabled`    |
+|           | Range label  | text color       | `$text-disabled`    |
+|           | Thumb        | fill             | `$border-disabled`  |
+|           | Track        | background-color | `$border-disabled`  |
+| Read-only | Label        | text color       | `$text-secondary`   |
+|           | Range label  | text color       | `$text-primary`     |
+|           | Track        | background-color | `$border-subtle` \* |
+|           | Track:filled | background-color | `$border-inverse`   |
+
+<Caption>
+  * Denotes a contextual color token that will change values based on the layer
+  it is placed on.
+</Caption>
+
+<Row>
+<Column colLg={8}>
+
+![Slider interactive states](images/slider-style-states.png)
+
+</Column>
+</Row>
 
 ## Typography
 
@@ -50,14 +81,15 @@ The width of a slider varies based on page content and layout.
 | ------------ | ------------------------- | ---------- | ------------- |
 | Thumb        | height, width             | 14 / 0.875 | –             |
 | Thumb:active | height, width             | 20 / 1.25  | –             |
+| Thumb:active | height, width             | 20 / 1.25  | –             |
 | Track        | height                    | 4 / 0.25   | –             |
 |              | margin-left, margin-right | 8 / 0.5    | `$spacing-03` |
-| Label        | margin-bottom             | 16 / 1     | `$spacing-05` |
+| Label        | margin-bottom             | 8 / 0.5    | `$spacing-03` |
 | Range label  | margin-right              | 16 / 1     | `$spacing-05` |
 
 <div className="image--fixed">
 
-![Structure and spacing measurements for slider](images/slider-style-1.png)
+![Structure and spacing measurements for slider](images/slider-style-spec.png)
 
 </div>
 

src/pages/components/slider/usage.mdx

@@ -17,6 +17,7 @@ increase or decrease the value by moving the handle along a horizontal track.
 
 <AnchorLink>Overview</AnchorLink>
 <AnchorLink>Live demo</AnchorLink>
+<AnchorLink>Behaviors</AnchorLink>
 <AnchorLink>Interactions</AnchorLink>
 <AnchorLink>Best practices</AnchorLink>
 <AnchorLink>Feedback</AnchorLink>
@@ -40,7 +41,7 @@ value range.
 <Row>
 <Column colLg={8}>
 
-![Example of volume slider](images/slider-usage-1.png)
+![Example of a slider in context](images/slider-usage-overview.png)
 
 </Column>
 </Row>
@@ -85,6 +86,21 @@ value range.
   </ComponentVariant>
 </ComponentDemo>
 
+## Behaviors
+
+### States
+
+The slider component has the following states for both the track and the text
+input: enabled, hover, focus, active, disabled, read-only, and skeleton.
+
+<Row>
+<Column colLg={8}>
+
+![Example of slider states](images/slider-usage-states.png)
+
+</Column>
+</Row>
+
 ## Interactions
 
 ### Mouse
@@ -95,15 +111,13 @@ automatically updates the value in the text input.
 
 ### Keyboard
 
-Users can enter an exact numeric value into the text input field. While in the
-text field, using the ↑ ↓ ← → arrow keys increments the value in the text input.
-Either method adjusts the slider handle to the corresponding position.
+Users can enter an exact numeric value into the text input field or use the Up,
+Down, Left, and Right arrow keys to change the value. Either method adjusts the
+slider handle to the corresponding position.
 
-With the focus on the slider itself, users can also increment the value using
-the arrow keys. The arrow keys in combination with the `Shift` key can alter the
-slider by the value of the **stepMultiplier**. _Example: With `stepMultiplier`
-set at `10`, typing `Shift` + `→` changes the value from 60 to 70, increasing
-the inputted value by 10 units._
+Users can also increment the value by using the arrow keys when the slider
+receives focus. The arrow keys, in combination with the `Shift` key can alter
+the slider by the value of the `stepMultiplier`.
 
 <Row>
 <Column colLg={8}>
@@ -117,8 +131,8 @@ the inputted value by 10 units._
 
 - The slider label should indicate what value the slider is changing.
 - Range values are used to describe the range in numbers.
-- Do not use for ranges that are extremely large _i.e. 1-1000_.
-- Do not use for ranges that are too small _i.e. 1-3_.
+- Do not use for extremely large ranges, for example, 1-1000.
+- Do not use ranges that are too small, for example, 1-3.
 
 ## Feedback