feat(documentation): Rename input range to slider

.changeset/silver-jars-sparkle.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Renamed input range to slider.

packages/documentation/cypress/e2e/components/range.cy.ts

@@ -1,7 +1,7 @@
 describe('Range', () => {
   describe('Accessibility', () => {
     beforeEach(() => {
-      cy.visit('/iframe.html?id=snapshots--range');
+      cy.visit('/iframe.html?id=snapshots--slider');
       cy.get('.form-range', { timeout: 30000 }).should('be.visible');
       cy.injectAxe();
     });

packages/documentation/cypress/e2e/components/select.cy.ts

@@ -1,7 +1,7 @@
 describe('Select', () => {
   describe('Accessibility', () => {
     beforeEach(() => {
-      cy.visit('/iframe.html?id=snapshots--range');
+      cy.visit('/iframe.html?id=snapshots--slider');
       cy.get('.form-range', { timeout: 30000 }).should('be.visible');
       cy.injectAxe();
     });

packages/documentation/src/stories/components/forms/range/range.docs.mdx → packages/documentation/src/stories/components/forms/slider/slider.docs.mdx

@@ -1,10 +1,10 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
-import * as RangeStories from './range.stories';
+import * as SliderStories from './slider.stories';
 import StylesPackageImport from '../../../../shared/styles-package-import.mdx';
 
-<Meta of={RangeStories} />
+<Meta of={SliderStories} />
 
-# Range
+# Slider
 
 <div className="lead">
   Use our custom <code>&lt;input type="range" /&gt;</code> for consistent cross-browser styling and
@@ -13,9 +13,9 @@ import StylesPackageImport from '../../../../shared/styles-package-import.mdx';
 
 Create custom `range` controls with `.form-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers.
 
-<Canvas sourceState="shown" of={RangeStories.Default} />
+<Canvas sourceState="shown" of={SliderStories.Default} />
 <div className="hide-col-default">
-  <Controls of={RangeStories.Default} />
+  <Controls of={SliderStories.Default} />
 </div>
 
 <StylesPackageImport components={["form-range"]} required={{ 'form-feedback': true }} />
@@ -29,11 +29,11 @@ The following examples show the different characteristics of the component. Thes
 Range inputs have implicit values for `min` and `max` (0 and 100 respectively), and snap to integer values by default.
 You may specify new values for those using the `min`, `max` and `step` attributes.
 
-<Canvas of={RangeStories.Boundaries} />
+<Canvas of={SliderStories.Boundaries} />
 
 ### Validation
 
 Simply add the classes `.is-valid` or `.is-invalid` to the `range` element to show it in the expected state.<br/>
 When the component has been validated, don't forget to add a `<p class="valid-feedback">...</p>` or `<p class="invalid-feedback">...</p>` element after the `range` element to explain what went wrong. This enables the user to correct the mistake.
 
-<Canvas of={RangeStories.Validation} />
+<Canvas of={SliderStories.Validation} />

packages/documentation/src/stories/components/forms/range/range.snapshot.stories.ts → packages/documentation/src/stories/components/forms/slider/slider.snapshot.stories.ts

@@ -1,5 +1,5 @@
 import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
-import meta from './range.stories';
+import meta from './slider.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../../utils';
 
@@ -12,7 +12,7 @@ export default {
 
 type Story = StoryObj;
 
-export const Range: Story = {
+export const Slider: Story = {
   render: (_args: Args, context: StoryContext) => {
     return html`
       <div class="d-flex flex-wrap align-items-start gap-regular">

packages/documentation/src/stories/components/forms/range/range.stories.ts → packages/documentation/src/stories/components/forms/slider/slider.stories.ts

@@ -9,11 +9,9 @@ const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
   'is-invalid': true,
 };
 
-const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-
 const meta: MetaComponent = {
   id: '4c5a4537-d663-4d2b-9c49-17af95443696',
-  title: 'Components/Forms/Range',
+  title: 'Components/Forms/Slider',
   tags: ['package:HTML'],
   render: render,
   parameters: {