Skip to content

Commit

Permalink
feat(slider): mobile optimisation (#1221)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nowseemee
Arturo Castillo Delgado authored and nowseemee committed Oct 27, 2022
1 parent a6ed3a6 commit 5d41da7
Show file tree
Hide file tree
Showing 8 changed files with 691 additions and 437 deletions.
50 changes: 30 additions & 20 deletions packages/components/src/components/slider/__snapshots__/slider.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,51 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Slider should match snapshot 1`] = `
<scale-slider>
<scale-slider value="0" value-from="0" value-to="0">
<mock:shadow-root>
<div class="slider" part="slider">
<div class="slider__track-wrapper" part="track-wrapper">
<div class="slider__track" part="track">
<div class="slider__bar" part="bar" style="width: 0%; background-color: var(--background-bar);"></div>
<div class="slider__thumb-wrapper" part="thumb-wrapper" style="left: 0%;">
<div aria-labelledby="slider-0-label" aria-orientation="horizontal" aria-valuemax="100" aria-valuemin="0" aria-valuetext="undefined" class="slider__thumb" id="slider-0" part="thumb" role="slider" tabindex="0"></div>
<div part="base">
<div part="label-wrapper">
<div part="value-text">
0
</div>
</div>
<div part="track-wrapper">
<div part="track">
<div part="bar" style="left: 0%; width: 0%;"></div>
<div part="inner-track">
<div part="thumb-wrapper" style="left: 0%;">
<div aria-labelledby="slider-0-label" aria-orientation="horizontal" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" aria-valuetext="0" id="slider-0" part="thumb" role="slider" tabindex="0"></div>
</div>
</div>
</div>
<input type="hidden">
<div class="slider__display-value" part="display-value"></div>
</div>
<input type="hidden" value="0">
</div>
</mock:shadow-root>
Label
</scale-slider>
`;
exports[`Slider should match snapshot 2`] = `
<scale-slider value="10">
<scale-slider value="10" value-from="0" value-to="0">
<mock:shadow-root>
<div class="slider" part="slider">
<div class="slider__track-wrapper" part="track-wrapper">
<div class="slider__track" part="track">
<div class="slider__bar" part="bar" style="width: 10%; background-color: var(--background-bar);"></div>
<div class="slider__thumb-wrapper" part="thumb-wrapper" style="left: 10%;">
<div aria-labelledby="slider-1-label" aria-orientation="horizontal" aria-valuemax="100" aria-valuemin="0" aria-valuenow="10" aria-valuetext="10" class="slider__thumb" id="slider-1" part="thumb" role="slider" tabindex="0"></div>
</div>
<div part="base">
<div part="label-wrapper">
<div part="value-text">
10
</div>
<input type="hidden" value="10">
<div class="slider__display-value" part="display-value">
10%
</div>
<div part="track-wrapper">
<div part="track">
<div part="bar" style="left: 0%; width: 10%;"></div>
<div part="inner-track">
<div part="thumb-wrapper" style="left: 10%;">
<div aria-labelledby="slider-1-label" aria-orientation="horizontal" aria-valuemax="100" aria-valuemin="0" aria-valuenow="10" aria-valuetext="10" id="slider-1" part="thumb" role="slider" tabindex="0"></div>
</div>
</div>
</div>
</div>
<input type="hidden" value="10">
</div>
</mock:shadow-root>
Label
Expand Down
51 changes: 32 additions & 19 deletions packages/components/src/components/slider/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,29 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ------------- | -------------- | ----------------------------------------------------------------------------------------- | ------------- | ----------- |
| `customColor` | `custom-color` | <span style="color:red">**[DEPRECATED]**</span> - optional) slider custom color<br/><br/> | `string` | `undefined` |
| `decimals` | `decimals` | (optional) number of decimal places | `0 \| 1 \| 2` | `0` |
| `disabled` | `disabled` | (optional) disabled | `boolean` | `false` |
| `label` | `label` | (optional) slider label | `string` | `undefined` |
| `max` | `max` | (optional) the maximal value of the slider | `number` | `100` |
| `min` | `min` | t(optional) he minimal value of the slider | `number` | `0` |
| `name` | `name` | (optional) the name of the slider | `string` | `undefined` |
| `showValue` | `show-value` | (optional) slider display value | `boolean` | `true` |
| `sliderId` | `slider-id` | (optional) Slider id | `string` | `undefined` |
| `step` | `step` | (optional) the step size to increase or decrease when dragging slider | `number` | `1` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
| `thumbLarge` | `thumb-large` | (optional) larger thumb | `boolean` | `false` |
| `trackSmall` | `track-small` | (optional) smaller track | `boolean` | `false` |
| `unit` | `unit` | (optional) slider value unit | `string` | `'%'` |
| `value` | `value` | (optional) the display value of the slider | `number` | `undefined` |
| Property | Attribute | Description | Type | Default |
| --------------- | ----------------- | ---------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `customColor` | `custom-color` | <span style="color:red">**[DEPRECATED]**</span> (optional) slider custom color<br/><br/> | `string` | `undefined` |
| `decimals` | `decimals` | (optional) number of decimal places | `0 \| 1 \| 2` | `0` |
| `disabled` | `disabled` | (optional) disabled | `boolean` | `false` |
| `helperText` | `helper-text` | (optional) helper text | `string` | `undefined` |
| `label` | `label` | (optional) slider label | `string` | `undefined` |
| `max` | `max` | (optional) the maximal value of the slider | `number` | `100` |
| `min` | `min` | t(optional) he minimal value of the slider | `number` | `0` |
| `name` | `name` | (optional) the name of the slider | `string` | `undefined` |
| `range` | `range` | (optional) multi-thumb | `boolean` | `false` |
| `showStepMarks` | `show-step-marks` | (optional) show a mark for each step | `boolean` | `false` |
| `showValue` | `show-value` | (optional) slider display value | `boolean` | `true` |
| `sliderId` | `slider-id` | (optional) Slider id | `string` | `undefined` |
| `step` | `step` | (optional) the step size to increase or decrease when dragging slider | `number` | `1` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
| `thumbLarge` | `thumb-large` | <span style="color:red">**[DEPRECATED]**</span> (optional) larger thumb<br/><br/> | `boolean` | `undefined` |
| `trackSmall` | `track-small` | <span style="color:red">**[DEPRECATED]**</span> (optional) smaller track<br/><br/> | `boolean` | `undefined` |
| `unit` | `unit` | (optional) slider value unit | `string` | `''` |
| `unitPosition` | `unit-position` | (optional) unit position | `"after" \| "before"` | `'after'` |
| `value` | `value` | (optional) the value of the slider | `number` | `0` |
| `valueFrom` | `value-from` | (optional) when `range` is true, the "from" value | `number` | `0` |
| `valueTo` | `value-to` | (optional) when `range` is true, the "to" value | `number` | `0` |


## Events
Expand All @@ -41,12 +47,19 @@
| Part | Description |
| ----------------- | ----------- |
| `"bar"` | |
| `"display-value"` | |
| `"from"` | |
| `"helper-text"` | |
| `"inner-track"` | |
| `"label"` | |
| `"thumb"` | |
| `"label-wrapper"` | |
| `"meta"` | |
| `"step-mark"` | |
| `"step-marks"` | |
| `"thumb-wrapper"` | |
| `"to"` | |
| `"track"` | |
| `"track-wrapper"` | |
| `"value-text"` | |


----------------------------------------------
Expand Down
Loading

0 comments on commit 5d41da7

Please sign in to comment.