From a9af3172adab7b666ba69b4fe3623f6b683a4b1e Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Mon, 6 Jan 2025 16:44:43 -0500
Subject: [PATCH] Rename Range to Slider (#428)

---
 docs/_includes/svgs/{range.njk => slider.njk} |  0
 docs/docs/components/popup.md                 | 22 ++---
 docs/docs/components/{range.md => slider.md}  | 32 ++++----
 docs/docs/experimental/form-validation.md     |  4 +-
 docs/docs/experimental/sandbox.md             |  4 +-
 docs/docs/experimental/themer.md              |  8 +-
 docs/docs/native/slider.md                    |  4 +-
 docs/docs/theming/component-groups.md         |  2 +-
 .../{range/range.css => slider/slider.css}    |  0
 .../range.test.ts => slider/slider.test.ts}   | 80 +++++++++----------
 .../{range/range.ts => slider/slider.ts}      | 40 +++++-----
 src/styles/themes/classic.css                 |  2 +-
 12 files changed, 99 insertions(+), 99 deletions(-)
 rename docs/_includes/svgs/{range.njk => slider.njk} (100%)
 rename docs/docs/components/{range.md => slider.md} (82%)
 rename src/components/{range/range.css => slider/slider.css} (100%)
 rename src/components/{range/range.test.ts => slider/slider.test.ts} (69%)
 rename src/components/{range/range.ts => slider/slider.ts} (89%)

diff --git a/docs/_includes/svgs/range.njk b/docs/_includes/svgs/slider.njk
similarity index 100%
rename from docs/_includes/svgs/range.njk
rename to docs/_includes/svgs/slider.njk
diff --git a/docs/docs/components/popup.md b/docs/docs/components/popup.md
index 8b2a2796b..8a8fc7b94 100644
--- a/docs/docs/components/popup.md
+++ b/docs/docs/components/popup.md
@@ -248,7 +248,7 @@ Use the `distance` attribute to change the distance between the popup and its an
     <div class="box"></div>
   </wa-popup>
 
-  <wa-range min="-50" max="50" step="1" value="0" label="Distance"></wa-range>
+  <wa-slider min="-50" max="50" step="1" value="0" label="Distance"></wa-slider>
 </div>
 
 <style>
@@ -267,7 +267,7 @@ Use the `distance` attribute to change the distance between the popup and its an
     border-radius: var(--wa-border-radius-m);
   }
 
-  .popup-distance wa-range {
+  .popup-distance wa-slider {
     max-width: 260px;
   }
 </style>
@@ -275,7 +275,7 @@ Use the `distance` attribute to change the distance between the popup and its an
 <script>
   const container = document.querySelector('.popup-distance');
   const popup = container.querySelector('wa-popup');
-  const distance = container.querySelector('wa-range');
+  const distance = container.querySelector('wa-slider');
 
   distance.addEventListener('wa-input', () => (popup.distance = distance.value));
 </script>
@@ -292,7 +292,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
     <div class="box"></div>
   </wa-popup>
 
-  <wa-range min="-50" max="50" step="1" value="0" label="Skidding"></wa-range>
+  <wa-slider min="-50" max="50" step="1" value="0" label="Skidding"></wa-slider>
 </div>
 
 <style>
@@ -311,7 +311,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
     border-radius: var(--wa-border-radius-m);
   }
 
-  .popup-skidding wa-range {
+  .popup-skidding wa-slider {
     max-width: 260px;
   }
 </style>
@@ -319,7 +319,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
 <script>
   const container = document.querySelector('.popup-skidding');
   const popup = container.querySelector('wa-popup');
-  const skidding = container.querySelector('wa-range');
+  const skidding = container.querySelector('wa-slider');
 
   skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
 </script>
@@ -747,8 +747,8 @@ When a gap exists between the anchor and the popup element, this option will add
   </wa-popup>
   <br>
   <wa-switch checked>Hover Bridge</wa-switch><br>
-  <wa-range min="0" max="50" step="1" value="10" label="Distance"></wa-range>
-  <wa-range min="-50" max="50" step="1" value="0" label="Skidding"></wa-range>
+  <wa-slider min="0" max="50" step="1" value="10" label="Distance"></wa-slider>
+  <wa-slider min="-50" max="50" step="1" value="0" label="Skidding"></wa-slider>
 </div>
 <style>
   .popup-hover-bridge span[slot='anchor'] {
@@ -766,7 +766,7 @@ When a gap exists between the anchor and the popup element, this option will add
     border-radius: var(--wa-border-radius-m);
   }
 
-  .popup-hover-bridge wa-range {
+  .popup-hover-bridge wa-slider {
     max-width: 260px;
     margin-top: .5rem;
   }
@@ -780,8 +780,8 @@ When a gap exists between the anchor and the popup element, this option will add
   const container = document.querySelector('.popup-hover-bridge');
   const popup = container.querySelector('wa-popup');
   const hoverBridge = container.querySelector('wa-switch');
-  const distance = container.querySelector('wa-range[label="Distance"]');
-  const skidding = container.querySelector('wa-range[label="Skidding"]');
+  const distance = container.querySelector('wa-slider[label="Distance"]');
+  const skidding = container.querySelector('wa-slider[label="Skidding"]');
   distance.addEventListener('wa-input', () => (popup.distance = distance.value));
   skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
   hoverBridge.addEventListener('wa-change', () => (popup.hoverBridge = hoverBridge.checked));
diff --git a/docs/docs/components/range.md b/docs/docs/components/slider.md
similarity index 82%
rename from docs/docs/components/range.md
rename to docs/docs/components/slider.md
index bc5332a05..9400458b0 100644
--- a/docs/docs/components/range.md
+++ b/docs/docs/components/slider.md
@@ -1,13 +1,13 @@
 ---
-title: Range
+title: Slider
 description: Ranges allow the user to select a single value within a given range using a slider.
 tags: [inputs, forms]
 native: slider
-icon: range
+icon: slider
 ---
 
 ```html {.example}
-<wa-range></wa-range>
+<wa-slider></wa-slider>
 ```
 
 :::info
@@ -21,7 +21,7 @@ This component works with standard `<form>` elements. Please refer to the sectio
 Use the `label` attribute to give the range an accessible label. For labels that contain HTML, use the `label` slot instead.
 
 ```html {.example}
-<wa-range label="Volume" min="0" max="100"></wa-range>
+<wa-slider label="Volume" min="0" max="100"></wa-slider>
 ```
 
 ### Hint
@@ -29,7 +29,7 @@ Use the `label` attribute to give the range an accessible label. For labels that
 Add descriptive hint to a range with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead.
 
 ```html {.example}
-<wa-range label="Volume" hint="Controls the volume of the current song." min="0" max="100"></wa-range>
+<wa-slider label="Volume" hint="Controls the volume of the current song." min="0" max="100"></wa-slider>
 ```
 
 ### Min, Max, and Step
@@ -37,7 +37,7 @@ Add descriptive hint to a range with the `hint` attribute. For hints that contai
 Use the `min` and `max` attributes to set the range's minimum and maximum values, respectively. The `step` attribute determines the value's interval when increasing and decreasing.
 
 ```html {.example}
-<wa-range min="0" max="10" step="1"></wa-range>
+<wa-slider min="0" max="10" step="1"></wa-slider>
 ```
 
 ### Disabled
@@ -45,7 +45,7 @@ Use the `min` and `max` attributes to set the range's minimum and maximum values
 Use the `disabled` attribute to disable a slider.
 
 ```html {.example}
-<wa-range disabled></wa-range>
+<wa-slider disabled></wa-slider>
 ```
 
 ### Tooltip Placement
@@ -53,7 +53,7 @@ Use the `disabled` attribute to disable a slider.
 By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it below the slider.
 
 ```html {.example}
-<wa-range tooltip="bottom"></wa-range>
+<wa-slider tooltip="bottom"></wa-slider>
 ```
 
 ### Disable the Tooltip
@@ -61,7 +61,7 @@ By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it be
 To disable the tooltip, set `tooltip` to `none`.
 
 ```html {.example}
-<wa-range tooltip="none"></wa-range>
+<wa-slider tooltip="none"></wa-slider>
 ```
 
 ### Custom Track Colors
@@ -69,12 +69,12 @@ To disable the tooltip, set `tooltip` to `none`.
 You can customize the active and inactive portions of the track using the `--track-color-active` and `--track-color-inactive` custom properties.
 
 ```html {.example}
-<wa-range
+<wa-slider
   style="
   --track-color-active: var(--wa-color-brand-fill-loud);
   --track-color-inactive: var(--wa-color-brand-fill-normal);
 "
-></wa-range>
+></wa-slider>
 ```
 
 ### Custom Track Offset
@@ -82,7 +82,7 @@ You can customize the active and inactive portions of the track using the `--tra
 You can customize the initial offset of the active track using the `--track-active-offset` custom property.
 
 ```html {.example}
-<wa-range
+<wa-slider
   min="-100"
   max="100"
   style="
@@ -90,7 +90,7 @@ You can customize the initial offset of the active track using the `--track-acti
   --track-color-inactive: var(--wa-color-brand-fill-normal);
   --track-active-offset: 50%;
 "
-></wa-range>
+></wa-slider>
 ```
 
 ### Custom Tooltip Formatter
@@ -98,7 +98,7 @@ You can customize the initial offset of the active track using the `--track-acti
 You can change the tooltip's content by setting the `tooltipFormatter` property to a function that accepts the range's value as an argument.
 
 ```html {.example}
-<wa-range min="0" max="100" step="1" class="range-with-custom-formatter"></wa-range>
+<wa-slider min="0" max="100" step="1" class="range-with-custom-formatter"></wa-slider>
 
 <script>
   const range = document.querySelector('.range-with-custom-formatter');
@@ -111,8 +111,8 @@ You can change the tooltip's content by setting the `tooltipFormatter` property
 The component adapts to right-to-left (RTL) languages as you would expect.
 
 ```html {.example}
-<wa-range dir="rtl"
+<wa-slider dir="rtl"
   label="مقدار"
   hint="التحكم في مستوى صوت الأغنية الحالية."
-  style="--track-color-active: var(--wa-color-brand-fill-loud)" value="10"></wa-range>
+  style="--track-color-active: var(--wa-color-brand-fill-loud)" value="10"></wa-slider>
 ```
diff --git a/docs/docs/experimental/form-validation.md b/docs/docs/experimental/form-validation.md
index d3efe0c0a..babfe804d 100644
--- a/docs/docs/experimental/form-validation.md
+++ b/docs/docs/experimental/form-validation.md
@@ -15,7 +15,7 @@ Adding the `wa-valid` or `wa-invalid` class to a form control will change its ap
       <wa-option>Well, maybe two is OK</wa-option>
     </wa-select>
     <wa-textarea class="wa-valid" label="Bio" hint="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
-    <wa-range class="wa-valid" value="50" label="Volume" hint="Crank it up"></wa-range><br>
+    <wa-slider class="wa-valid" value="50" label="Volume" hint="Crank it up"></wa-slider><br>
     <wa-checkbox class="wa-valid" checked>I am awesome</wa-checkbox><br>
     <wa-checkbox class="wa-valid">So am I</wa-checkbox><br><br>
     <wa-switch class="wa-valid" checked>Still awesome</wa-switch><br>
@@ -35,7 +35,7 @@ Adding the `wa-valid` or `wa-invalid` class to a form control will change its ap
       <wa-option>Well, maybe two is OK</wa-option>
     </wa-select>
     <wa-textarea class="wa-invalid" label="Bio" hint="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
-    <wa-range class="wa-invalid" value="50" label="Volume" hint="Crank it up"></wa-range><br>
+    <wa-slider class="wa-invalid" value="50" label="Volume" hint="Crank it up"></wa-slider><br>
     <wa-checkbox class="wa-invalid" checked>I am awesome</wa-checkbox><br>
     <wa-checkbox class="wa-invalid">So am I</wa-checkbox><br><br>
     <wa-switch class="wa-invalid" checked>Still awesome</wa-switch><br>
diff --git a/docs/docs/experimental/sandbox.md b/docs/docs/experimental/sandbox.md
index d3e9e4d9c..5307767e6 100644
--- a/docs/docs/experimental/sandbox.md
+++ b/docs/docs/experimental/sandbox.md
@@ -132,7 +132,7 @@ layout: page
 <br />
 <wa-switch checked>Switch on</wa-switch>
 <br /><br />
-<wa-range label="Range" hint="Here's a bit of handy content." min="0" max="100"></wa-range>
+<wa-slider label="Range" hint="Here's a bit of handy content." min="0" max="100"></wa-slider>
 <br /><br />
 <wa-input label="Label" hint="Super helpful and/or contextual content" placeholder="Placeholder"></wa-input>
 <br />
@@ -239,7 +239,7 @@ layout: page
     <wa-badge>OCBS</wa-badge>
     <wa-avatar></wa-avatar>
     <wa-rating></wa-rating>
-    <wa-range></wa-range>
+    <wa-slider></wa-slider>
     <wa-icon-button name="gear" label="Settings"></wa-icon-button>
     <wa-progress-bar value="50" style="width: 8rem;"></wa-progress-bar>
     <wa-spinner></wa-spinner>
diff --git a/docs/docs/experimental/themer.md b/docs/docs/experimental/themer.md
index 18efdee49..afb2b7580 100644
--- a/docs/docs/experimental/themer.md
+++ b/docs/docs/experimental/themer.md
@@ -661,10 +661,10 @@ hasOutline: false
       <wa-option value="dotted">Dotted</wa-option>
       <wa-option value="double">Double</wa-option>
     </wa-select>
-    <wa-range name="border-width" label="Border width" min="1" max="5" value="1" step="1" tooltip="none"></wa-range>
-    <wa-range name="spacing" label="Spacing" min=".5" max="1.5" value="1" step="0.125" tooltip="none"></wa-range>
-    <wa-range name="corners" label="Corners" min="0" max="1.5" value=".25" step=".125" tooltip="none"></wa-range>
-    <wa-range name="depth" label="Depth" min="0" max="4" value="0" step="1" tooltip="none"></wa-range>
+    <wa-slider name="border-width" label="Border width" min="1" max="5" value="1" step="1" tooltip="none"></wa-slider>
+    <wa-slider name="spacing" label="Spacing" min=".5" max="1.5" value="1" step="0.125" tooltip="none"></wa-slider>
+    <wa-slider name="corners" label="Corners" min="0" max="1.5" value=".25" step=".125" tooltip="none"></wa-slider>
+    <wa-slider name="depth" label="Depth" min="0" max="4" value="0" step="1" tooltip="none"></wa-slider>
   </wa-details>
 </form>
 
diff --git a/docs/docs/native/slider.md b/docs/docs/native/slider.md
index 4bbce4ba8..82381521a 100644
--- a/docs/docs/native/slider.md
+++ b/docs/docs/native/slider.md
@@ -3,8 +3,8 @@ title: Slider
 description: Sliders allow the user to select a single value within a given range using a slider.
 tags: forms
 layout: element
-icon: range
-component: range
+icon: slider
+component: slider
 elements:
   "<input type=range>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
 ---
diff --git a/docs/docs/theming/component-groups.md b/docs/docs/theming/component-groups.md
index a054e5282..e24aa42ca 100644
--- a/docs/docs/theming/component-groups.md
+++ b/docs/docs/theming/component-groups.md
@@ -50,7 +50,7 @@ Not every form control uses all of these custom properties. For example, `<wa-ra
   </wa-radio-group>
   <wa-checkbox>Checkbox</wa-checkbox>
   <wa-switch>Switch</wa-switch>
-  <wa-range label="Range"></wa-range>
+  <wa-slider label="Range"></wa-slider>
   <wa-button>Button</wa-button>
 </form>
 
diff --git a/src/components/range/range.css b/src/components/slider/slider.css
similarity index 100%
rename from src/components/range/range.css
rename to src/components/slider/slider.css
diff --git a/src/components/range/range.test.ts b/src/components/slider/slider.test.ts
similarity index 69%
rename from src/components/range/range.test.ts
rename to src/components/slider/slider.test.ts
index b880dc418..f1baf8f33 100644
--- a/src/components/range/range.test.ts
+++ b/src/components/slider/slider.test.ts
@@ -6,20 +6,20 @@ import { clickOnElement } from '../../internal/test.js';
 import { fixtures } from '../../internal/test/fixture.js';
 import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import { serialize } from '../../utilities/form.js';
-import type WaRange from './range.js';
+import type WaSlider from './slider.js';
 
-describe('<wa-range>', () => {
-  runFormControlBaseTests('wa-range');
+describe('<wa-slider>', () => {
+  runFormControlBaseTests('wa-slider');
 
   for (const fixture of fixtures) {
     describe(`with "${fixture.type}" rendering`, () => {
       it('should pass accessibility tests', async () => {
-        const el = await fixture<WaRange>(html`<wa-range label="Name"></wa-range>`);
+        const el = await fixture<WaSlider>(html`<wa-slider label="Name"></wa-slider>`);
         await expect(el).to.be.accessible();
       });
 
       it('default properties', async () => {
-        const el = await fixture<WaRange>(html` <wa-range></wa-range> `);
+        const el = await fixture<WaSlider>(html` <wa-slider></wa-slider> `);
 
         expect(el.name).to.equal('');
         expect(el.value).to.equal(0);
@@ -36,14 +36,14 @@ describe('<wa-range>', () => {
       });
 
       it('should have title if title attribute is set', async () => {
-        const el = await fixture<WaRange>(html` <wa-range title="Test"></wa-range> `);
+        const el = await fixture<WaSlider>(html` <wa-slider title="Test"></wa-slider> `);
         const input = el.shadowRoot!.querySelector('input')!;
 
         expect(input.title).to.equal('Test');
       });
 
       it('should be disabled with the disabled attribute', async () => {
-        const el = await fixture<WaRange>(html` <wa-range disabled></wa-range> `);
+        const el = await fixture<WaSlider>(html` <wa-slider disabled></wa-slider> `);
         const input = el.shadowRoot!.querySelector<HTMLInputElement>('.control')!;
 
         expect(input.disabled).to.be.true;
@@ -51,7 +51,7 @@ describe('<wa-range>', () => {
 
       describe('when the value changes', () => {
         it('should emit wa-change and wa-input and decrease the value when pressing right arrow', async () => {
-          const el = await fixture<WaRange>(html` <wa-range value="50"></wa-range> `);
+          const el = await fixture<WaSlider>(html` <wa-slider value="50"></wa-slider> `);
           const changeHandler = sinon.spy();
           const inputHandler = sinon.spy();
 
@@ -67,7 +67,7 @@ describe('<wa-range>', () => {
         });
 
         it('should not emit wa-change or wa-input when changing the value programmatically', async () => {
-          const el = await fixture<WaRange>(html` <wa-range value="0"></wa-range> `);
+          const el = await fixture<WaSlider>(html` <wa-slider value="0"></wa-slider> `);
 
           el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
           el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
@@ -77,7 +77,7 @@ describe('<wa-range>', () => {
         });
 
         it('should not emit wa-change or wa-input when stepUp() is called programmatically', async () => {
-          const el = await fixture<WaRange>(html` <wa-range step="2" value="2"></wa-range> `);
+          const el = await fixture<WaSlider>(html` <wa-slider step="2" value="2"></wa-slider> `);
 
           el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
           el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
@@ -86,7 +86,7 @@ describe('<wa-range>', () => {
         });
 
         it('should not emit wa-change or wa-input when stepDown() is called programmatically', async () => {
-          const el = await fixture<WaRange>(html` <wa-range step="2" value="2"></wa-range> `);
+          const el = await fixture<WaSlider>(html` <wa-slider step="2" value="2"></wa-slider> `);
 
           el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
           el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
@@ -97,7 +97,7 @@ describe('<wa-range>', () => {
 
       describe('step', () => {
         it('should increment by step when stepUp() is called', async () => {
-          const el = await fixture<WaRange>(html` <wa-range step="2" value="2"></wa-range> `);
+          const el = await fixture<WaSlider>(html` <wa-slider step="2" value="2"></wa-slider> `);
 
           el.stepUp();
           await el.updateComplete;
@@ -105,7 +105,7 @@ describe('<wa-range>', () => {
         });
 
         it('should decrement by step when stepDown() is called', async () => {
-          const el = await fixture<WaRange>(html` <wa-range step="2" value="2"></wa-range> `);
+          const el = await fixture<WaSlider>(html` <wa-slider step="2" value="2"></wa-slider> `);
 
           el.stepDown();
           await el.updateComplete;
@@ -115,49 +115,49 @@ describe('<wa-range>', () => {
 
       describe('when submitting a form', () => {
         it('should serialize its name and value with FormData', async () => {
-          const form = await fixture<HTMLFormElement>(html` <form><wa-range name="a" value="1"></wa-range></form> `);
+          const form = await fixture<HTMLFormElement>(html` <form><wa-slider name="a" value="1"></wa-slider></form> `);
           const formData = new FormData(form);
           expect(formData.get('a')).to.equal('1');
         });
 
         it('should serialize its name and value with JSON', async () => {
-          const form = await fixture<HTMLFormElement>(html` <form><wa-range name="a" value="1"></wa-range></form> `);
+          const form = await fixture<HTMLFormElement>(html` <form><wa-slider name="a" value="1"></wa-slider></form> `);
           const json = serialize(form);
           expect(json.a).to.equal('1');
         });
 
         it('should be invalid when setCustomValidity() is called with a non-empty value', async () => {
-          const range = await fixture<HTMLFormElement>(html` <wa-range></wa-range> `);
+          const slider = await fixture<HTMLFormElement>(html` <wa-slider></wa-slider> `);
 
-          range.setCustomValidity('Invalid selection');
-          await range.updateComplete;
+          slider.setCustomValidity('Invalid selection');
+          await slider.updateComplete;
 
-          expect(range.checkValidity()).to.be.false;
-          expect(range.hasCustomState('invalid')).to.be.true;
-          expect(range.hasCustomState('valid')).to.be.false;
-          expect(range.hasCustomState('user-invalid')).to.be.false;
-          expect(range.hasCustomState('user-valid')).to.be.false;
+          expect(slider.checkValidity()).to.be.false;
+          expect(slider.hasCustomState('invalid')).to.be.true;
+          expect(slider.hasCustomState('valid')).to.be.false;
+          expect(slider.hasCustomState('user-invalid')).to.be.false;
+          expect(slider.hasCustomState('user-valid')).to.be.false;
 
-          await clickOnElement(range);
-          await range.updateComplete;
-          range.blur();
-          await range.updateComplete;
+          await clickOnElement(slider);
+          await slider.updateComplete;
+          slider.blur();
+          await slider.updateComplete;
 
-          expect(range.hasCustomState('user-invalid')).to.be.true;
-          expect(range.hasCustomState('user-valid')).to.be.false;
+          expect(slider.hasCustomState('user-invalid')).to.be.true;
+          expect(slider.hasCustomState('user-valid')).to.be.false;
         });
 
         it('should receive validation attributes ("states") even when novalidate is used on the parent form', async () => {
-          const el = await fixture<HTMLFormElement>(html` <form novalidate><wa-range></wa-range></form> `);
-          const range = el.querySelector<WaRange>('wa-range')!;
+          const el = await fixture<HTMLFormElement>(html` <form novalidate><wa-slider></wa-slider></form> `);
+          const slider = el.querySelector<WaSlider>('wa-slider')!;
 
-          range.setCustomValidity('Invalid value');
-          await range.updateComplete;
+          slider.setCustomValidity('Invalid value');
+          await slider.updateComplete;
 
-          expect(range.hasCustomState('invalid')).to.be.true;
-          expect(range.hasCustomState('valid')).to.be.false;
-          expect(range.hasCustomState('user-invalid')).to.be.false;
-          expect(range.hasCustomState('user-valid')).to.be.false;
+          expect(slider.hasCustomState('invalid')).to.be.true;
+          expect(slider.hasCustomState('valid')).to.be.false;
+          expect(slider.hasCustomState('user-invalid')).to.be.false;
+          expect(slider.hasCustomState('user-valid')).to.be.false;
         });
 
         it('should be present in form data when using the form attribute and located outside of a <form>', async () => {
@@ -166,7 +166,7 @@ describe('<wa-range>', () => {
               <form id="f">
                 <wa-button type="submit">Submit</wa-button>
               </form>
-              <wa-range form="f" name="a" value="50"></wa-range>
+              <wa-slider form="f" name="a" value="50"></wa-slider>
             </div>
           `);
           const form = el.querySelector('form')!;
@@ -180,12 +180,12 @@ describe('<wa-range>', () => {
         it('should reset the element to its initial value', async () => {
           const form = await fixture<HTMLFormElement>(html`
             <form>
-              <wa-range name="a" value="99"></wa-range>
+              <wa-slider name="a" value="99"></wa-slider>
               <wa-button type="reset">Reset</wa-button>
             </form>
           `);
           const button = form.querySelector('wa-button')!;
-          const input = form.querySelector('wa-range')!;
+          const input = form.querySelector('wa-slider')!;
           input.value = 80;
 
           await input.updateComplete;
diff --git a/src/components/range/range.ts b/src/components/slider/slider.ts
similarity index 89%
rename from src/components/range/range.ts
rename to src/components/slider/slider.ts
index f54fa7d90..68e4ec7dc 100644
--- a/src/components/range/range.ts
+++ b/src/components/slider/slider.ts
@@ -14,7 +14,7 @@ import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-eleme
 import sliderStyles from '../../styles/native/slider.css';
 import formControlStyles from '../../styles/shadow/form-control.css';
 import { LocalizeController } from '../../utilities/localize.js';
-import styles from './range.css';
+import styles from './slider.css';
 
 /**
  * @summary Ranges allow the user to select a single value within a given range using a slider.
@@ -22,7 +22,7 @@ import styles from './range.css';
  * @status stable
  * @since 2.0
  *
- * @slot label - The range's label. Alternatively, you can use the `label` attribute.
+ * @slot label - The slider label. Alternatively, you can use the `label` attribute.
  * @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
  *
  * @event wa-blur - Emitted when the control loses focus.
@@ -36,7 +36,7 @@ import styles from './range.css';
  * @csspart form-control-input - The input's wrapper.
  * @csspart hint - The hint's wrapper.
  * @csspart base - The internal `<input>` element.
- * @csspart tooltip - The range's tooltip.
+ * @csspart tooltip - The slider tooltip.
  *
  * @cssproperty --thumb-color - The color of the thumb.
  * @cssproperty --thumb-gap - The visual gap between the edges of the thumb and the track.
@@ -48,8 +48,8 @@ import styles from './range.css';
  * @cssproperty --track-height - The height of the track.
  * @cssproperty --track-active-offset - The point of origin of the active track.
  */
-@customElement('wa-range')
-export default class WaRange extends WebAwesomeFormAssociatedElement {
+@customElement('wa-slider')
+export default class WaSlider extends WebAwesomeFormAssociatedElement {
   static shadowStyle = [formControlStyles, sliderStyles, styles];
 
   static get validators() {
@@ -66,7 +66,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
   @state() private hasTooltip = false;
   @property() title = ''; // make reactive to pass through
 
-  /** The name of the range, submitted as a name/value pair with form data. */
+  /** The name of the slider, submitted as a name/value pair with form data. */
   @property() name: string = '';
 
   /** The default value of the form control. Primarily used for resetting the form control. */
@@ -75,7 +75,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
 
   private _value: number | null = null;
 
-  /** The current value of the range, submitted as a name/value pair with form data. */
+  /** The current value of the slider, submitted as a name/value pair with form data. */
   get value(): number {
     if (this.valueHasChanged) {
       return this._value || 0;
@@ -94,29 +94,29 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
     this._value = val;
   }
 
-  /** The range's label. If you need to display HTML, use the `label` slot instead. */
+  /** The slider label. If you need to display HTML, use the `label` slot instead. */
   @property() label = '';
 
-  /** The range's hint. If you need to display HTML, use the hint slot instead. */
+  /** The slider hint. If you need to display HTML, use the hint slot instead. */
   @property({ attribute: 'hint' }) hint = '';
 
-  /** Disables the range. */
+  /** Disables the slider. */
   @property({ type: Boolean }) disabled = false;
 
-  /** The minimum acceptable value of the range. */
+  /** The minimum acceptable value of the slider. */
   @property({ type: Number }) min = 0;
 
-  /** The maximum acceptable value of the range. */
+  /** The maximum acceptable value of the slider. */
   @property({ type: Number }) max = 100;
 
-  /** The interval at which the range will increase and decrease. */
+  /** The interval at which the slider will increase and decrease. */
   @property({ type: Number }) step = 1;
 
-  /** The preferred placement of the range's tooltip. */
+  /** The preferred placement of the slider tooltip. */
   @property() tooltip: 'top' | 'bottom' | 'none' = 'top';
 
   /**
-   * A function used to format the tooltip's value. The range's value is passed as the first and only argument. The
+   * A function used to format the tooltip's value. The slider value is passed as the first and only argument. The
    * function should return a string to display in the tooltip.
    */
   @property({ attribute: false }) tooltipFormatter: (value: number) => string = (value: number) => value.toString();
@@ -237,17 +237,17 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
     }
   }
 
-  /** Sets focus on the range. */
+  /** Sets focus on the slider. */
   focus(options?: FocusOptions) {
     this.input.focus(options);
   }
 
-  /** Removes focus from the range. */
+  /** Removes focus from the slider. */
   blur() {
     this.input.blur();
   }
 
-  /** Increments the value of the range by the value of the step attribute. */
+  /** Increments the value of the slider by the value of the step attribute. */
   stepUp() {
     this.input.stepUp();
     if (this.value !== Number(this.input.value)) {
@@ -255,7 +255,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
     }
   }
 
-  /** Decrements the value of the range by the value of the step attribute. */
+  /** Decrements the value of the slider by the value of the step attribute. */
   stepDown() {
     this.input.stepDown();
     if (this.value !== Number(this.input.value)) {
@@ -330,6 +330,6 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'wa-range': WaRange;
+    'wa-slider': WaSlider;
   }
 }
diff --git a/src/styles/themes/classic.css b/src/styles/themes/classic.css
index f2c49f249..6f1adb783 100644
--- a/src/styles/themes/classic.css
+++ b/src/styles/themes/classic.css
@@ -448,7 +448,7 @@ wa-radio {
   --checked-icon-scale: 0.4;
 }
 
-wa-range {
+wa-slider {
   --thumb-gap: 0;
 }