feat: ✨ syn-range

[schilchSICKAG]

Checklist (for the issue creator)

• I have looked at the documentation site and was not able to find the component.
• I have looked into the Figma boards and was not able to find the component.

Story

As a [Developer] using the Synergy Design System, I would like to give my users the ability to select a value of one to multiple ranges more easily. This may for example be used for things like percentual values (e.g. 0 - 100) or other such types of controls where exact precision is not required.

Please have a look if shoelace-style/shoelace#1912 can be used as a base.
Maybe we can adjust this PR or use it as a base.

Acceptance criteria

• All DoD items successfully completed
• The control must be able to act as a simple range slider, according to the current specs.
• The control must be part of form submission
• The control should support all form attributes that a native <input type="range" /> is able to (e.g. required, min, max).
• The control should support all form css selectors that a native <input type="range" /> is able to (e.g. syn-range::valid, syn-range::invalid)
• All parts of the control (e.g. track and knob) must be available for external styling via css parts.
• The control supports showing multiple tick items.
• The control is able to show multiple <syn-range-knob> components.
• It should be able to be navigated via mouse/touch and keyboard interaction.
• It should by accessible via screenreaders and follow a11y guidelines.
• It should allow to place an arbitary number of knobs that can be used to "block" the next value with a defined min and max value.

[klaarseSICKAG]

reference: https://opensource.adobe.com/spectrum-web-components/components/slider-handle/