Component: Slider

[gfellerph]

Create a new slider component. Sliders allow users to quickly adjust content by dragging actions or using the keyboard to change a single numeric value or a range of values.

Design

https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=18201-21381&mode=design&t=RSmJlLxtSlkSHV3R-0

Features

• Can have one or two handles to specify a value or a range
• Can have input fields for specifying a precise value
• Can have validation states
• Can have tickmarks (https://github.com/swisspost/design-system/issues/2242), also check the <datalist> on MDN to see how that's done natively
• Allow thumbs to be dragged across each other (https://ant.design/components/slider, if one thumb is in the middle, the other can be dragged either to the left or right end of the slider)

Structure (proposal)

Props

• range: Indicates if a range can be specified or not (two thumbs)
• value: Current value, invalid if it is not representable with the current min/max/step settings
• min: Minimum value
• max: Maximum value
• step: Granularity that value can have

<label for="slider">Slider</label>
<post-slider id="slider" range min="5" max="20" step="5" ></post-slider>

### Tasks
- [ ] Add a `post-slider` component
- [ ] Add a tab to the slider docs page, documenting the web component
- [ ] Write snapshot tests
- [ ] Review by UX

[imagoiq]

It could be great to use <output> element for displaying the value.

[gfellerph]

• [x] It is possible to use box-shadow to imitate the left track side and style it differently (https://stackoverflow.com/questions/72837338/is-it-possible-to-style-input-type-range-with-just-a-left-and-right-color-and-no) in Chrome as well. Added ticket https://github.com/swisspost/design-system/issues/2765 for CSS implementation