@spectrum-web-components/slider 0.33.2 → 0.33.3-overlay.66
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -16
- package/package.json +9 -9
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
## Description
|
|
2
2
|
|
|
3
|
-
`<sp-slider>` allows users to quickly select a value within a range. They should be used when the upper and lower bounds
|
|
3
|
+
`<sp-slider>` allows users to quickly select a value within a range. They should be used when the upper and lower bounds of the range are invariable.
|
|
4
4
|
|
|
5
5
|
### Usage
|
|
6
6
|
|
|
@@ -18,7 +18,7 @@ Import the side effectful registration of `<sp-slider>` via:
|
|
|
18
18
|
import '@spectrum-web-components/slider/sp-slider.js';
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
When leveraging the `editable` attribute, the `@spectrum-web-components/number-field/sp-number-field.js` dependency will be asynchronously loaded via a dynamic import to reduce JS payload for applications not leveraging this feature. In the case that you would like to import those
|
|
21
|
+
When leveraging the `editable` attribute, the `@spectrum-web-components/number-field/sp-number-field.js` dependency will be asynchronously loaded via a dynamic import to reduce JS payload for applications not leveraging this feature. In the case that you would like to import those transverse dependencies statically, import the side effectful registration of `<sp-slider>` as follows:
|
|
22
22
|
|
|
23
23
|
```
|
|
24
24
|
import '@spectrum-web-components/slider/sync/sp-slider.js';
|
|
@@ -122,8 +122,8 @@ An `<sp-slider>` element can be paired with an `<sp-number-field>` element via t
|
|
|
122
122
|
#### Quiet
|
|
123
123
|
|
|
124
124
|
```html
|
|
125
|
-
<sp-slider quiet editable></sp-slider>
|
|
126
|
-
<sp-slider quiet disabled editable></sp-slider>
|
|
125
|
+
<sp-slider quiet editable value="50"></sp-slider>
|
|
126
|
+
<sp-slider quiet disabled editable value="50"></sp-slider>
|
|
127
127
|
```
|
|
128
128
|
|
|
129
129
|
#### Indeterminate
|
|
@@ -131,8 +131,8 @@ An `<sp-slider>` element can be paired with an `<sp-number-field>` element via t
|
|
|
131
131
|
The indeterminate attribute will be passed to the internal `<sp-number-field>` element and alter its visual delivery until a change has been made to the `<sp-slider>` element at which point the `change` event that is dispatched can be understood as always removing the indeterminate attribute from the `<sp-slider>`.
|
|
132
132
|
|
|
133
133
|
```html
|
|
134
|
-
<sp-slider indeterminate editable></sp-slider>
|
|
135
|
-
<sp-slider indeterminate disabled editable></sp-slider>
|
|
134
|
+
<sp-slider indeterminate editable value="50"></sp-slider>
|
|
135
|
+
<sp-slider indeterminate disabled editable value="50"></sp-slider>
|
|
136
136
|
```
|
|
137
137
|
|
|
138
138
|
## Advanced normalization
|
|
@@ -142,13 +142,13 @@ For advanced applications, it is sometimes necessary to specify a custom
|
|
|
142
142
|
"normalization."
|
|
143
143
|
|
|
144
144
|
Normalization is the process of converting a slider to a value between 0 and 1 where
|
|
145
|
-
0 represents the minimum and 1 represents the maximum. See the <a href="storybook/index.html?path=/story/slider--three-handles-complex" target="_blank">"Three Handles Complex" example in the playground</a>.
|
|
145
|
+
0 represents the minimum and 1 represents the maximum. See the <a href="../../storybook/index.html?path=/story/slider--three-handles-complex" target="_blank">"Three Handles Complex" example in the playground</a>.
|
|
146
146
|
|
|
147
147
|
## Labels and Formatting
|
|
148
148
|
|
|
149
149
|
An `<sp-slider>` or `<sp-slider-handle>` element will process its numeric value with `new Intl.NumberFormat(this.resolvedLanguage, this.formatOptions).format(this.value)` in order to prepare it for visual delivery in the input. In order to customize this processing supply your own `Intl.NumberFormatOptions` via the `formatOptions` property, or `format-options` attribute as seen below.
|
|
150
150
|
|
|
151
|
-
`this.resolvedLanguage` represents the language in which the `<sp-slider>` or `<sp-slider-handle>` element is currently being delivered. By default, this value will represent the language established by the `lang` attribute on the root `<html>` element while falling back to `navigator.language` when that is not present. This value can be customized via a language context provided by a parent element that listens for the `sp-language-context` event and supplies
|
|
151
|
+
`this.resolvedLanguage` represents the language in which the `<sp-slider>` or `<sp-slider-handle>` element is currently being delivered. By default, this value will represent the language established by the `lang` attribute on the root `<html>` element while falling back to `navigator.language` when that is not present. This value can be customized via a language context provided by a parent element that listens for the `sp-language-context` event and supplies updated language settings to the `callback` function contained therein. Applications leveraging the [`<sp-theme>`](./components/theme) element to manage the visual delivery or text direction of their content will also be provided a reactive context for supplying language information to its descendants.
|
|
152
152
|
|
|
153
153
|
```html
|
|
154
154
|
<sp-slider
|
|
@@ -163,7 +163,7 @@ An `<sp-slider>` or `<sp-slider-handle>` element will process its numeric value
|
|
|
163
163
|
></sp-slider>
|
|
164
164
|
```
|
|
165
165
|
|
|
166
|
-
More advanced formatting is
|
|
166
|
+
More advanced formatting is available by specifying a formatting function to
|
|
167
167
|
the `getAriaHandleText` property on an `sp-slider` or `sp-slider-handle`. Or,
|
|
168
168
|
for a multi-handle slider, you can format the combined value label for all
|
|
169
169
|
handles by passing a formatting function to the `getAriaValueText` property
|
|
@@ -186,25 +186,29 @@ While `Intl.NumberFormatOptions` does support a [wide range of units](https://tc
|
|
|
186
186
|
</sp-slider>
|
|
187
187
|
```
|
|
188
188
|
|
|
189
|
-
Note: the polyfilling done here is very simplistic and is triggered by supplying options that would otherwise cause the `Intl.NumberFormat()` call to throw an error. Once the unsupporting unit of `px` causes the construction of the object to throw, a
|
|
189
|
+
Note: the polyfilling done here is very simplistic and is triggered by supplying options that would otherwise cause the `Intl.NumberFormat()` call to throw an error. Once the unsupporting unit of `px` causes the construction of the object to throw, a backup formatter/parser pair will be created without the supplied unit data. When the `style` is set to `unit`, the `unit` value will be adopted as the _static_ unit display. This means that neither pluralization nor translation will be handled within the `<sp-number-field>` element itself. If pluralization or translation is important to the delivered interface, please be sure to handle passing those strings into to element via the `formatOptions` property reactively to the value of the element or locale of that page in question.
|
|
190
190
|
|
|
191
191
|
### Label Visibility
|
|
192
192
|
|
|
193
|
-
|
|
193
|
+
By default, an `<sp-slider>` element has both a "text" label and a "value" label. Either or both of these can be suppressed visually as needed by your application UI. This delivery is controlled by the `label-visibility` attribute (or `labelVisibility` property) which accepts `text`, `value`, or `none` as values.
|
|
194
194
|
|
|
195
|
-
Use `label-visibility="text"` to
|
|
195
|
+
Use `label-visibility="text"` to suppress the "value" label:
|
|
196
196
|
|
|
197
197
|
```html
|
|
198
|
-
<sp-slider
|
|
198
|
+
<sp-slider
|
|
199
|
+
label="No visible value label"
|
|
200
|
+
label-visibility="text"
|
|
201
|
+
value="50"
|
|
202
|
+
></sp-slider>
|
|
199
203
|
```
|
|
200
204
|
|
|
201
|
-
Use `label-visibility="value"` to
|
|
205
|
+
Use `label-visibility="value"` to suppress the "text" label:
|
|
202
206
|
|
|
203
207
|
```html
|
|
204
208
|
<sp-slider label="No visible text label" label-visibility="value"></sp-slider>
|
|
205
209
|
```
|
|
206
210
|
|
|
207
|
-
Use `label-visibility="none"` to
|
|
211
|
+
Use `label-visibility="none"` to suppress the "text" label:
|
|
208
212
|
|
|
209
213
|
```html
|
|
210
214
|
<sp-slider label="No visible labels" label-visibility="none"></sp-slider>
|
|
@@ -214,7 +218,7 @@ In each case outlined above the content for both labels will be made available t
|
|
|
214
218
|
|
|
215
219
|
## Events
|
|
216
220
|
|
|
217
|
-
Like the `<input type="range">` element after which the `<sp-slider>` is fashioned it will dispatch `input` events in a stream culminating with a `change` event (representing the final
|
|
221
|
+
Like the `<input type="range">` element after which the `<sp-slider>` is fashioned, it will dispatch `input` events in a stream culminating with a `change` event (representing the final commit of the `value` to the element) once the user has finished interacting with the element. Both other these events can access the `value` of their dispatching target via `event.target.value`. In this way, a steaming listener pattern similar to the following can prove useful:
|
|
218
222
|
|
|
219
223
|
```javascript
|
|
220
224
|
const slider = document.querySelector('sp-slider');
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/slider",
|
|
3
|
-
"version": "0.33.
|
|
3
|
+
"version": "0.33.3-overlay.66+30e96d5ea",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -75,15 +75,15 @@
|
|
|
75
75
|
"dependencies": {
|
|
76
76
|
"@internationalized/number": "^3.1.0",
|
|
77
77
|
"@lit-labs/observers": "^2.0.0",
|
|
78
|
-
"@spectrum-web-components/base": "^0.33.
|
|
79
|
-
"@spectrum-web-components/field-label": "^0.33.
|
|
80
|
-
"@spectrum-web-components/number-field": "^0.33.
|
|
81
|
-
"@spectrum-web-components/reactive-controllers": "^0.33.
|
|
82
|
-
"@spectrum-web-components/shared": "^0.33.
|
|
83
|
-
"@spectrum-web-components/theme": "^0.33.
|
|
78
|
+
"@spectrum-web-components/base": "^0.33.3-overlay.66+30e96d5ea",
|
|
79
|
+
"@spectrum-web-components/field-label": "^0.33.3-overlay.66+30e96d5ea",
|
|
80
|
+
"@spectrum-web-components/number-field": "^0.33.3-overlay.66+30e96d5ea",
|
|
81
|
+
"@spectrum-web-components/reactive-controllers": "^0.33.3-overlay.66+30e96d5ea",
|
|
82
|
+
"@spectrum-web-components/shared": "^0.33.3-overlay.66+30e96d5ea",
|
|
83
|
+
"@spectrum-web-components/theme": "^0.33.3-overlay.66+30e96d5ea"
|
|
84
84
|
},
|
|
85
85
|
"devDependencies": {
|
|
86
|
-
"@spectrum-css/slider": "^4.0.
|
|
86
|
+
"@spectrum-css/slider": "^4.0.10"
|
|
87
87
|
},
|
|
88
88
|
"types": "./src/index.d.ts",
|
|
89
89
|
"customElements": "custom-elements.json",
|
|
@@ -92,5 +92,5 @@
|
|
|
92
92
|
"./**/*.dev.js",
|
|
93
93
|
"./sync/sp-*.js"
|
|
94
94
|
],
|
|
95
|
-
"gitHead": "
|
|
95
|
+
"gitHead": "30e96d5eaed31b7b2af916d78cabccb722889fe3"
|
|
96
96
|
}
|