feat: ✨ add `sd-range` / `sd-range-knob`

[karlbaumhauer]

User Story

As a user of the Solid Design System, I would like to utilize a range component in order to provide a possibility to select a range between two values, as well as have additional information about the scale and steps on these values displayed in a brand conform and accessible way.

Documentation / Hand-off

Figma Branch

The sd-range contains a parent and a child component. In case the user needs only one single knob, the child component sd-range-knob is not needed. The sd-range will add a single knob by itself. In case the user needs multiple knobs (currently only 2 knobs are communicated), the knobs slot is supposed to be used and 2 knobs need to be added.

sd-range

Components detailed requirements

Props

Status	Name	Type	Default	Description
[ ]	label	string	Label	Simple text to define the label.
[ ]	help-text	string	Help-text	Simple text to define an optinal helper text underneath the component.
[ ]	offset	number	none	Defines the offest value of the range starting point.
[ ]	min	number	0	Defines the sart value of the range.
[ ]	max	number	100	Defindes the end value of the range.
[ ]	step	number	1	Defines the step granularity of the knobs.
[ ]	value	number	none	Defines/describes the value of the input field itself.
[ ]	no-tooltip	boolean	false	Hides the tooltip on the knobs.
[ ]	disabled	boolean	false	Disables the range component.

CSS-Properties

• [ ] track-offset -This influences the styling of the offset – maybe this is easier than an attribute, but we would have to chack (Shoelace's solution looks quite straightforward) – maybe this is useful in the knob as well, but I'm not sure

  Parts (besides the shoelace parts)

• [ ] every HTML element => NOTE: if highlighting the parts in the parts story does not work out of the box, do not spend more effort on it but open a bug ticket to tackle it later.

  Slots

• [ ] label - HTML content and/or complex lable structure can be added here.
• [ ] help-text - HTML content and/or complex help-text structure can be added here.
• [ ] scale - Slot for additional scale elements.
• [ ] knobs - Slot for multiple knobs.

  Stories (besides the default story)

• [ ] offset & disabled - showing a range with offset and in disabled state.
• [ ] mouseless - showing the keyboard functionality
• [ ] slots - showing all the slots of the range.
• [ ] parts - shwoing all the CSS parts of the range.

  Samples

• [ ] scale - showing a sample with a simple scale
• [ ] label & help-text - showing a complex label and help-text slot usage to display additional min/max labels ("Mehr/Weniger Riskio")

Open Questions towards design

• [ ] Question1
• [ ] Question2

sd-range-knob

Components detailed requirements

Props

Status	Name	Type	Default	Description
[ ]	value	type	default	Defines/describes the value of the input field itself.
[ ]	label	type	default	Describes the technical HTML label of the input field itself.

Parts

• [ ] every other HTML element (depending on the HTML structure) => NOTE: if highlighting the parts in the parts story does not work out of the box, do not spend more effort on it but open a bug ticket to tackle it later.

Slots

• [ ] name - description
• [ ] name - description

  Stories (besides the default story)

• [ ] name - (description)
• [ ] name - (description)

  Samples

• [ ] name - description
• [ ] name - description

Open Questions towards design

• [ ] Question1
• [ ] Question2

Technincal Information

Adobe Spectrum uses the same approach with multiple knobs in a slot. This functionality could be copied. As Adobe published unter Apache 2.0 license and we would have to add additional license information to the file, copy-paste might be more effort rather than rewriting everything => TBD.

We definitely should start with the Shoelace solution because of it's form handling and maybe can adapt thigns than to the Adobe one.

Subtasks

• [x] https://github.com/solid-design-system/figma/issues/66
• [ ] #1009
• [ ] #1008

DoR

• [x] Item has business value
• [x] All subtasks have been estimated by the team
• [x] Item is clear and well-defined
• [x] Item dependencies have been identified

DoD

• [ ] All subtasks have been closed

[karlbaumhauer]

@coraliefeil and @mariohamann pls fill in the missing infos / answer the open questions. After that, you can move the ticket into the refinement column.

[mariohamann]

Removed myself, moved to be refined and removed pre-refinement label.

[yoezlem]

FYI: Because the component will be very complex with the multi-range function, I have decided, just like with the datepicker component, to label this as a new feature and remove the CL-Migration label. If you have any questions, feel free to reach out to me.