Update RangeControl documentation to clarify rail vs track

[kkoppenhaver]

What?

This PR addresses the need for more specificity in the RangeControl component docs, identified in #34292.

Why?

This clarifies the documentation provided for the RangeControl component and makes it more specific with regards to the Rail and Track portions of the component.

How?

Documentation in the Anatomy section has been updated and added to.

Testing Instructions

Review the changed file as part of the PR.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @kkoppenhaver! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[ciampo]

Hey @kkoppenhaver , thank you for your contribution!

As listed in the original issue, currently the docs feature an image that has numbers that are described by the text — and with your changes, those numbers would go out of sync.

@mirka , do you think we can remove this image altogether from RangeControl's docs?

[mirka]

@mirka , do you think we can remove this image altogether from RangeControl's docs?

I'm fine with removing, unless @jasmussen has the original file and wants to update it 🙂 https://developer.wordpress.org/block-editor/reference-guides/components/range-control/

[jasmussen]

The icon and metrics are wrong, so it definitely needs an update. However we have a ways to go across components, so an update now would likely make it out of date quickly. With storybook able to run the actual component, I think we're fine without the image for now. What do you think?

[ciampo]

With storybook able to run the actual component, I think we're fine without the image for now. What do you think?

Agreed

[chad1008]

The updated docs look great to me, thanks @kkoppenhaver! I'd also say this is good to go once the image is removed from Storybook 👍

[kkoppenhaver]

@chad1008 I'm not familiar with Storybook or where that lives. Is that something I'm able to update or does that have to be somebody else?

[ciampo]

I believe that @chad1008 meant to say to remove the image from the README, not from Storybook.

That can be done easily:

diff --git a/packages/components/src/range-control/README.md b/packages/components/src/range-control/README.md
index 346055d483..2a8f7ae7a0 100644
--- a/packages/components/src/range-control/README.md
+++ b/packages/components/src/range-control/README.md
@@ -16,8 +16,6 @@ A RangeControl for volume
 
 ### Anatomy
 
-![](https://make.wordpress.org/design/files/2018/12/rangecontrol-anatomy.png)
-
 A RangeControl can contain the following elements:
 
 1. **Rail**: The rail represents the entire surface area of the slider, from the minimum value selectable by the user to the maximum value selectable by the user. For left-to-right (LTR) languages, the minimum value appears on the far left, and the maximum value on the far right. For right-to-left (RTL) languages this orientation is reversed, with the minimum value on the far right and the maximum value on the far left.

The component looks good on Storybook :

[chad1008]

oof, yes, sorry - I completely misspoke there. Sorry for the confusion.

[kkoppenhaver]

No worries! Updated the PR to remove the image.

[ciampo]

Thank you @kkoppenhaver for you work here! 🚀