sp-slider
NPM
0.48.1
Storybook
View Storybook
Try it on
webcomponents.dev
0.48.1 (2024-10-01) #
Note: Version bump only for package @spectrum-web-components/slider
0.48.0 (2024-09-17) #
Note: Version bump only for package @spectrum-web-components/slider
0.47.2 (2024-09-03) #
Bug Fixes #
- slider: update variant attribute correctly (
#4714 ) (9c22dd6 )
0.47.1 (2024-08-27) #
Bug Fixes #
- slider: bump css version to increase slider z-index (
#4682 ) (04bba95 )
0.47.0 (2024-08-20) #
Note: Version bump only for package @spectrum-web-components/slider
0.46.0 (2024-08-08) #
Note: Version bump only for package @spectrum-web-components/slider
0.45.0 (2024-07-30) #
Note: Version bump only for package @spectrum-web-components/slider
0.44.0 (2024-07-15) #
Features #
- Silder: adjust fillStart calculation for value=0 and normalization function (
#4573 ) (369fee7 ), closes#4558
0.43.0 (2024-06-11) #
Note: Version bump only for package @spectrum-web-components/slider
0.42.5 (2024-05-24) #
Note: Version bump only for package @spectrum-web-components/slider
0.42.4 (2024-05-14) #
Bug Fixes #
- number-field, slider: floating point roundoff precision bug (
#4263 ) (74480ef ) - slider,overlay: ensure that pointer events in Slider are handled as expected in Overlay (
#4438 ) (db193e8 )
0.42.3 (2024-05-01) #
Bug Fixes #
- number-field, slider: floating point roundoff precision bug (
#4263 ) (74480ef )
0.42.2 (2024-04-03) #
Note: Version bump only for package @spectrum-web-components/slider
0.42.1 (2024-04-02) #
Bug Fixes #
- slider: skip variant="filled" css when fill-start (
#4217 ) (b6d389d )
0.42.0 (2024-03-19) #
Bug Fixes #
- styles, theme: surface exports that omit Spectrum Vars proactively (
#4142 ) (5b524c1 )
Features #
- asset: use core tokens (
99e76f4 )
0.41.2 (2024-03-05) #
Bug Fixes #
- slider: double click on slider handle to reset slider position (
#3991 ) (64c594a )
0.41.1 (2024-02-22) #
Bug Fixes #
- slider: revert handle ui at min/max values (
#4042 ) (da13af7 )
0.41.0 (2024-02-13) #
Bug Fixes #
- slider: high contrast improvements for filled track (
#3952 ) (782560d )
0.40.5 (2024-02-05) #
Bug Fixes #
- slider: reimplement gradient slider track application (
a10b91e )
0.40.4 (2024-01-29) #
Bug Fixes #
- slider: add "fill-start" attribute/property and associated "variant="filled" visual delivery (
#3876 ) (2c3e35e )
0.40.3 (2024-01-11) #
Note: Version bump only for package @spectrum-web-components/slider
0.40.2 (2023-12-18) #
Bug Fixes #
- slider: update handle alignment and color application (
#3860 ) (bed73c0 )
0.40.1 (2023-12-05) #
Bug Fixes #
- slider: align editable slider when no label provided (
#3816 ) (a5f4900 )
0.40.0 (2023-11-16) #
Note: Version bump only for package @spectrum-web-components/slider
0.39.4 (2023-11-02) #
Bug Fixes #
- infield-button: add infield-button package (
057b885 )
0.39.3 (2023-10-18) #
Bug Fixes #
- number-field: prevent over excited "change" events (
7b93724 )
0.39.2 (2023-10-13) #
Note: Version bump only for package @spectrum-web-components/slider
0.39.1 (2023-10-06) #
Bug Fixes #
- slider: ensure z-index in Express theme (
c0cc655 )
0.39.0 (2023-09-25) #
Bug Fixes #
- slider: add t-shirt sizing (
24dac78 )
0.38.0 (2023-09-05) #
Bug Fixes #
- slider: ensure first render when no "value" is supplied (
eed860b ) - slider: update CSS conversion for more correct visual delivery (
99c83e4 )
0.37.0 (2023-08-18) #
Note: Version bump only for package @spectrum-web-components/slider
0.36.0 (2023-08-18) #
Note: Version bump only for package @spectrum-web-components/slider
0.35.0 (2023-07-31) #
Note: Version bump only for package @spectrum-web-components/slider
0.34.0 (2023-07-11) #
Bug Fixes #
- slider:
#3340 fix visual regression (88e0bda ) - slider: slider input aria-valuetext omits formatOptions for unit
#3340 (d5ff7e6 )
0.33.2 (2023-06-14) #
Note: Version bump only for package @spectrum-web-components/slider
0.33.0 (2023-06-08) #
Bug Fixes #
- number-field: simplify width management (
ef4765a )
0.32.0 (2023-06-01) #
Bug Fixes #
- base: ensure streaming listener "streams" on the animation frame (
1478db1 )
Features #
- popover: use core tokens (
68328cc ) - slider: use spectrum-tokens (
8b1e72c )
0.31.0 (2023-05-17) #
Note: Version bump only for package @spectrum-web-components/slider
0.30.0 (2023-05-03) #
Bug Fixes #
- add "editable" option to "sp-slider" (
e86d7fa ) - allow tick labels to start counting from "min" (
e7e44e3 ) - apply Focuable styles in class extensions (
38f7afd ) - convert the langage resolution workflow to a Reactive Controller (
b7781db ) - correct
@element jsDoc listing across library (c97a632 ) - correct slider math in RTL contexts (
4d73fa9 ) - ensure browser understandable extensions (
f4e59f7 ) - ensure dependencies included in package.json (
eb77858 ) - ensure lazily loaded focusElements do not crash (
64f2a54 ) - ensure reactivity of resolved language (
5863a15 ) - ensure streamingListener ends even if pointercancel not fired (
74105f2 ) - fast forward changes in
#2905 (3a30b27 ) - flappy Slider/Color Area tests (
c769c87 ) - include "type" in package.json, generate custom-elements.json (
1a8d716 ) - include default export in the "exports" fields (
f32407d ) - include the "types" entry in package.json files (
b432f59 ) - include touch-action rule for draggable content (
53221da ) - include touch-action rule for draggable content (
3f507e6 ) - manage "lang" via context provided by "sp-theme" (
b1e3457 ) - manage updated node types (
0517fc1 ) - normalize "event" and "error" argument names (
8d382cd ) - prevent active pointer events when slider toggles to [disabled] (
ceb4d74 ) - prevent mobile interactions from triggering the virtual keyboard (
d06ad17 ) - prevent tabindex=-1 elements from placing focus on their host (
1ac1293 ) - remove right click value setting (
a44968d ) - resolve "updateComplete" with a boolean like LitElement (
2ebcd44 ) - simplify touch-action application (
d23f735 ) - slider: add less visually effectacious style to the slider output when editable (
8702294 ) - slider: add quiet and indeterminate (
8990573 ) - slider: allow irregular tick spacing and correct RTL value application (
a83f879 ) - slider: allow pointer interactions that start at the very begin/end to be tracked (
ff8c95c ) - slider: allow slot based label content (
d2d474e ) - slider: apply "handle.highlight = true" when using the keyboard to interact with handles (
94e6349 ) - slider: dispatch synthetic pointerdown event (
7dc74af ) - slider: ensure "sp-slider:input" is dispatched appropriately (
ded5440 ) - slider: ensure min/max/value application order (
80e8cb5 ) - slider: ensure pointer events on the track and handle act the same (
03adb36 ) - slider: ensure that handles are upgraded before extracting a model from them (
bbbb21f ) - slider: ensure track widths follow dynamic Spectrum CSS values (
5ad1c1a ) - slider: ensure value is bound as a property (
96bd01a ) - slider: fixes usage of aria-valuetext, adds aria-valuenow (
4b25a89 ) - slider: make implicit dependency on sp-slider-handle explicit (
cb8d84b ) - slider: manage focus more like a native rage input (
865115e ) - slider: manage value and max changing in unison (
4359fbe ) - slider: prevent pointercancel events by container touch-action (
4687d03 ) - slider: renamed flag from stepperActive to managed input to allow verified (scroll) input event (
89d6ac5 ) - slider: response to orientation changes when measuring the bounding box (
c1412f1 ) - slider: simplify application of the gradient backgrounds (
f96a97e ) - slider: support customizing visible label delivery (
a55b585 ) - slider: support non-supported units in "Intl.numberFormat" (
ac32355 ) - slider: update a11y tree and default max value (
3cbf222 ) - slider: use internal "input" for value sanitation (
dd588c9 ) - slider: use standard "change" and "input" events (
59cf786 ) - slider: work around Spectrum CSS bug in variant="range" styling (
e5810a9 ) - stop merging selectors in a way that alters the cascade (
369388f ) - update consumption of Spectrum CSS for latest version (
ed2305b ) - update latest Spectrum CSS beta releases (
d8d3acc ) - update method extension types to match (
6eb686f ) - update side effect listings (
8160d3a ) - update spelling (
283d10a ) - update to latest spectrum-css packages (
a5ca19f ) - use ObserveSlotText mixin to prevent white space from overriding label attribute (
610fb4b ) - use the "browsers" listing in postcss-preset-env (
4eaf6a2 )
Features #
- action-button: add action button pattern (
03ac00a ) - adopt DNA@7 base Spectrum CSS (
e08cafd ) - delivery dev mode messages in various packages (
62370a1 ) - include all Dev Mode files in side effects (
f70817c ) - leverage "exports" field in package.json (
321abd7 ) - multi-handle slider implementation (
8d5a743 ), closes#1385 - shared pkg versions, devmode define warning, registry-conflicts docs (
6e49565 ) - slider: add "ramp" and "tick" variant support (
bb98bb6 ) - slider: adds getAriaValueText property, fixes
#381 (5800915 ) - slider: mouse event fallback from pointer events (
b69e7fc ) - slider: support tick labels and tick steps (
1ccf8d6 ) - slider: update "value" default to match browser native range input (
0050f63 ) - slider: update spectrum css input (
21ebe36 ) - slider: use latest @spectrum-css/slider beta (
9f29bbe ) - update lit-* dependencies, wip (
377f3c8 ) - update to Spectrum CSS v3.0.0 (
e8b3d8f ) - use :focus-visable (via polyfill) instead of :focus (
11c6fc7 ) - use @adobe/spectrum-css@2.15.1 (
3918888 ) - use latest exports specification (
a7ecf4b )
Performance Improvements #
- use "sideEffects" listing in package.json (
7271614 ) - use imported TypeScript helpers instead of inlining them (
cc2bd0a )
Reverts #
- Revert "chore: release new versions" (
a6d655d )
0.15.11 (2023-04-24) #
Bug Fixes #
- ensure streamingListener ends even if pointercancel not fired (
74105f2 ) - fast forward changes in
#2905 (3a30b27 )
0.15.10 (2023-04-05) #
Note: Version bump only for package @spectrum-web-components/slider
0.15.9 (2023-03-22) #
Note: Version bump only for package @spectrum-web-components/slider
0.15.8 (2023-03-08) #
Note: Version bump only for package @spectrum-web-components/slider
0.15.7 (2023-02-13) #
Note: Version bump only for package @spectrum-web-components/slider
0.15.6 (2023-02-08) #
Note: Version bump only for package @spectrum-web-components/slider
0.15.5 (2023-01-23) #
Note: Version bump only for package @spectrum-web-components/slider
0.15.4 (2023-01-09) #
Note: Version bump only for package @spectrum-web-components/slider
0.15.3 (2022-12-08) #
Note: Version bump only for package @spectrum-web-components/slider
0.15.2 (2022-11-21) #
Bug Fixes #
- ensure dependencies included in package.json (
eb77858 )
0.15.1 (2022-11-14) #
Bug Fixes #
- ensure reactivity of resolved language (
5863a15 ) - slider: add less visually effectacious style to the slider output when editable (
8702294 )
0.15.0 (2022-10-28) #
Bug Fixes #
- manage updated node types (
0517fc1 )
Features #
- slider: update "value" default to match browser native range input (
0050f63 )
0.14.4 (2022-10-17) #
Note: Version bump only for package @spectrum-web-components/slider
0.14.3 (2022-10-10) #
Bug Fixes #
- convert the langage resolution workflow to a Reactive Controller (
b7781db ) - prevent mobile interactions from triggering the virtual keyboard (
d06ad17 )
0.14.2 (2022-09-14) #
Bug Fixes #
- update spelling (
283d10a ) - slider: renamed flag from stepperActive to managed input to allow verified (scroll) input event (
89d6ac5 )
0.14.1 (2022-08-24) #
Note: Version bump only for package @spectrum-web-components/slider
0.14.0 (2022-08-09) #
Features #
- include all Dev Mode files in side effects (
f70817c )
0.13.0 (2022-08-04) #
Features #
- delivery dev mode messages in various packages (
62370a1 )
0.12.14 (2022-07-18) #
Bug Fixes #
- slider: add quiet and indeterminate (
8990573 )
0.12.13 (2022-06-29) #
Bug Fixes #
- correct slider math in RTL contexts (
4d73fa9 )
0.12.12 (2022-06-07) #
Bug Fixes #
- update method extension types to match (
6eb686f )
0.12.11 (2022-05-27) #
Bug Fixes #
- update consumption of Spectrum CSS for latest version (
ed2305b )
0.12.10 (2022-05-12) #
Bug Fixes #
- allow tick labels to start counting from "min" (
e7e44e3 ) - prevent active pointer events when slider toggles to [disabled] (
ceb4d74 )
0.12.9 (2022-04-21) #
Note: Version bump only for package @spectrum-web-components/slider
0.12.8 (2022-03-30) #
Note: Version bump only for package @spectrum-web-components/slider
0.12.7 (2022-03-08) #
Note: Version bump only for package @spectrum-web-components/slider
0.12.6 (2022-03-04) #
Note: Version bump only for package @spectrum-web-components/slider
0.12.5 (2022-02-22) #
Note: Version bump only for package @spectrum-web-components/slider
0.12.4 (2022-02-02) #
Note: Version bump only for package @spectrum-web-components/slider
0.12.3 (2022-01-26) #
Bug Fixes #
- slider: ensure that handles are upgraded before extracting a model from them (
bbbb21f )
0.12.2 (2022-01-07) #
Bug Fixes #
- simplify touch-action application (
d23f735 )
0.12.1 (2021-12-13) #
Bug Fixes #
- slider: response to orientation changes when measuring the bounding box (
c1412f1 )
0.12.0 (2021-11-08) #
Features #
- update lit-* dependencies, wip (
377f3c8 )
0.11.1 (2021-11-08) #
Note: Version bump only for package @spectrum-web-components/slider
0.11.0 (2021-11-02) #
Features #
- adopt DNA@7 base Spectrum CSS (
e08cafd )
0.10.10 (2021-10-12) #
Note: Version bump only for package @spectrum-web-components/slider
0.10.9 (2021-10-05) #
Bug Fixes #
- slider: make implicit dependency on sp-slider-handle explicit (
cb8d84b )
0.10.8 (2021-09-20) #
Note: Version bump only for package @spectrum-web-components/slider
0.10.7 (2021-09-13) #
Bug Fixes #
- slider: support non-supported units in "Intl.numberFormat" (
ac32355 ) - ensure lazily loaded focusElements do not crash (
64f2a54 ) - flappy Slider/Color Area tests (
c769c87 )
0.10.6 (2021-08-24) #
Bug Fixes #
- correct
@element jsDoc listing across library (c97a632 )
0.10.5 (2021-08-17) #
Bug Fixes #
- add "editable" option to "sp-slider" (
e86d7fa ) - slider: support customizing visible label delivery (
a55b585 )
0.10.4 (2021-08-03) #
Bug Fixes #
- resolve "updateComplete" with a boolean like LitElement (
2ebcd44 )
0.10.3 (2021-07-22) #
Note: Version bump only for package @spectrum-web-components/slider
0.10.2 (2021-07-01) #
Bug Fixes #
- manage "lang" via context provided by "sp-theme" (
b1e3457 )
0.10.1 (2021-06-16) #
Note: Version bump only for package @spectrum-web-components/slider
0.10.0 (2021-06-11) #
Bug Fixes #
- slider: apply "handle.highlight = true" when using the keyboard to interact with handles (
94e6349 ) - slider: work around Spectrum CSS bug in variant="range" styling (
e5810a9 )
Features #
- multi-handle slider implementation (
8d5a743 ), closes#1385
0.9.7 (2021-06-07) #
Bug Fixes #
- use ObserveSlotText mixin to prevent white space from overriding label attribute (
610fb4b )
0.9.6 (2021-05-24) #
Bug Fixes #
- prevent tabindex=-1 elements from placing focus on their host (
1ac1293 )
0.9.5 (2021-05-12) #
Bug Fixes #
- include touch-action rule for draggable content (
53221da ) - include touch-action rule for draggable content (
3f507e6 ) - slider: ensure min/max/value application order (
80e8cb5 ) - slider: ensure pointer events on the track and handle act the same (
03adb36 ) - slider: ensure value is bound as a property (
96bd01a )
0.9.4 (2021-04-09) #
Note: Version bump only for package @spectrum-web-components/slider
0.9.3 (2021-03-29) #
Bug Fixes #
- slider: update a11y tree and default max value (
3cbf222 )
0.9.2 (2021-03-22) #
Bug Fixes #
- remove right click value setting (
a44968d )
0.9.1 (2021-03-05) #
Note: Version bump only for package @spectrum-web-components/slider
0.9.0 (2021-03-04) #
Features #
- use latest exports specification (
a7ecf4b )
0.8.2 (2021-02-11) #
Bug Fixes #
- update to latest spectrum-css packages (
a5ca19f )
0.8.1 (2021-01-28) #
Bug Fixes #
- slider: manage focus more like a native rage input (
865115e )
0.8.0 (2021-01-21) #
Bug Fixes #
- use the "browsers" listing in postcss-preset-env (
4eaf6a2 ) - slider: allow irregular tick spacing and correct RTL value application (
a83f879 ) - slider: allow pointer interactions that start at the very begin/end to be tracked (
ff8c95c ) - slider: allow slot based label content (
d2d474e ) - include the "types" entry in package.json files (
b432f59 ) - stop merging selectors in a way that alters the cascade (
369388f ) - update latest Spectrum CSS beta releases (
d8d3acc ) - slider: prevent pointercancel events by container touch-action (
4687d03 )
Features #
- action-button: add action button pattern (
03ac00a ) - slider: update spectrum css input (
21ebe36 ) - slider: use latest @spectrum-css/slider beta (
9f29bbe )
0.7.0 (2021-01-13) #
Bug Fixes #
- slider: allow irregular tick spacing and correct RTL value application (
a83f879 ) - slider: allow pointer interactions that start at the very begin/end to be tracked (
ff8c95c ) - slider: allow slot based label content (
d2d474e ) - include the "types" entry in package.json files (
b432f59 ) - stop merging selectors in a way that alters the cascade (
369388f ) - update latest Spectrum CSS beta releases (
d8d3acc ) - slider: prevent pointercancel events by container touch-action (
4687d03 )
Features #
- action-button: add action button pattern (
03ac00a ) - slider: update spectrum css input (
21ebe36 ) - slider: use latest @spectrum-css/slider beta (
9f29bbe )
0.6.4 (2020-10-12) #
Note: Version bump only for package @spectrum-web-components/slider
0.6.3 (2020-10-12) #
Bug Fixes #
- include default export in the "exports" fields (
f32407d )
0.6.2 (2020-09-25) #
Bug Fixes #
- update side effect listings (
8160d3a ) - slider: simplify application of the gradient backgrounds (
f96a97e )
0.6.1 (2020-09-14) #
Note: Version bump only for package @spectrum-web-components/slider
0.6.0 (2020-08-31) #
Features #
- update to Spectrum CSS v3.0.0 (
e8b3d8f )
0.5.4 (2020-08-19) #
Note: Version bump only for package @spectrum-web-components/slider
0.5.3 (2020-07-27) #
Note: Version bump only for package @spectrum-web-components/slider
0.5.2 (2020-07-24) #
Bug Fixes #
- ensure browser understandable extensions (
f4e59f7 )
0.5.1 (2020-07-22) #
Note: Version bump only for package @spectrum-web-components/slider
0.5.0 (2020-07-17) #
Features #
- leverage "exports" field in package.json (
321abd7 )
0.4.9 (2020-06-08) #
Note: Version bump only for package @spectrum-web-components/slider
0.4.8 (2020-04-16) #
Performance Improvements #
- use "sideEffects" listing in package.json (
7271614 )
0.4.7 (2020-04-10) #
Note: Version bump only for package @spectrum-web-components/slider
0.4.6 (2020-04-07) #
Bug Fixes #
- slider: dispatch synthetic pointerdown event (
7dc74af )
0.4.5 (2020-03-27) #
Bug Fixes #
- slider: use internal "input" for value sanitation (
dd588c9 )
0.4.4 (2020-03-11) #
Note: Version bump only for package @spectrum-web-components/slider
0.4.3 (2020-02-05) #
Note: Version bump only for package @spectrum-web-components/slider
0.4.2 (2020-02-01) #
Note: Version bump only for package @spectrum-web-components/slider
0.4.1 (2020-01-30) #
Note: Version bump only for package @spectrum-web-components/slider
0.4.0 (2020-01-06) #
Bug Fixes #
- slider: fixes usage of aria-valuetext, adds aria-valuenow (
4b25a89 )
Features #
- slider: adds getAriaValueText property, fixes
#381 (5800915 )
0.3.3 (2019-12-12) #
Bug Fixes #
- apply Focuable styles in class extensions (
38f7afd )
0.3.2 (2019-12-02) #
Bug Fixes #
- normalize "event" and "error" argument names (
8d382cd )
0.3.1 (2019-11-27) #
Bug Fixes #
- include "type" in package.json, generate custom-elements.json (
1a8d716 )
0.3.0 (2019-11-19) #
Features #
- use :focus-visable (via polyfill) instead of :focus (
11c6fc7 ) - use @adobe/spectrum-css@2.15.1 (
3918888 )
0.2.2 (2019-11-01) #
Bug Fixes #
- slider: ensure track widths follow dynamic Spectrum CSS values (
5ad1c1a ) - slider: use standard "change" and "input" events (
59cf786 )
0.2.1 (2019-10-23) #
Bug Fixes #
- slider: ensure "sp-slider:input" is dispatched appropriately (
ded5440 )
0.2.0 (2019-10-14) #
Bug Fixes #
- slider: manage value and max changing in unison (
4359fbe )
Features #
- slider: add "ramp" and "tick" variant support (
bb98bb6 ) - slider: mouse event fallback from pointer events (
b69e7fc ) - slider: support tick labels and tick steps (
1ccf8d6 )
Performance Improvements #
- use imported TypeScript helpers instead of inlining them (
cc2bd0a )
0.1.3 (2019-10-03) #
Note: Version bump only for package @spectrum-web-components/slider
Attributes and Properties #
disabled
disabled
boolean
false
dragging
dragging
boolean
false
editable
editable
boolean
fillStart
fill-start
number | boolean | undefined
formatOptions
format-options
NumberFormatOptions | undefined
hideStepper
hide-stepper
boolean
false
highlight
highlight
boolean
false
indeterminate
indeterminate
boolean
false
label
label
string
''
labelVisibility
label-visibility
'text' | 'value' | 'none' | undefined
max
max
number | 'next' | undefined
100
min
min
number | 'previous' | undefined
0
name
name
string
''
quiet
quiet
boolean
false
step
step
number | undefined
1
tabIndex
tabIndex
number
tickLabels
tick-labels
boolean
false
tickStep
tick-step
number
0
type
type
string
''
variant
variant
string
Slots #
default slot
handle
Events #
change
Event
An alteration to the value of the element has been committed by the user.
input
Event
The value of the element has changed.
sp-slider-handle-ready
CustomEvent
Description #
<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.
Usage #
yarn add @spectrum-web-components/slider
Import the side effectful registration of <sp-slider>
via:
import '@spectrum-web-components/slider/sp-slider.js';
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:
import '@spectrum-web-components/slider/sync/sp-slider.js';
When looking to leverage the Slider
base class as a type and/or for extension purposes, do so via:
import { Slider } from '@spectrum-web-components/slider';
Sizes #
<sp-slider label="Slider Label" size="s"></sp-slider> <sp-slider label="Slider Label - Editable" editable size="s"></sp-slider>
<sp-slider label="Slider Label"></sp-slider> <sp-slider label="Slider Label - Editable" editable></sp-slider>
<sp-slider label="Slider Label" size="l"></sp-slider> <sp-slider label="Slider Label - Editable" editable size="l"></sp-slider>
<sp-slider label="Slider Label" size="xl"></sp-slider> <sp-slider label="Slider Label - Editable" editable size="xl"></sp-slider>
Variants #
Standard #
<sp-slider label="Slider Label"></sp-slider> <sp-slider label="Slider Label - Disabled" disabled></sp-slider>
Filled #
<sp-slider label="Slider Label" max="1" variant="filled" min="0" value=".5" step="0.01" ></sp-slider> <sp-slider label="Slider Label - Disabled" max="1" variant="filled" min="0" value=".5" step="0.01" disabled ></sp-slider>
fill-start #
When both fill-start
and variant="filled"
are used in <sp-slider>
, the fill-start
property takes priority, and the variant="filled"
css will not apply.
<sp-slider label="Slider Label" max="1" fill-start variant="filled" min="0" value=".5" step="0.01" ></sp-slider> <sp-slider label="Slider Label" max="1" fill-start variant="filled" min="0" value=".5" step="0.01" disabled ></sp-slider>
fill-start with value #
Any number (including 0
) can be used as a fill-start value. If a
Fill Start greater than value #
<sp-slider id="fill-start-slider" label="Fill Start greater than Value" max="1" min="0" value=".3" step="0.1" fill-start="0.7" variant="filled" ></sp-slider>
Fill Start less than value #
<sp-slider id="fill-start-slider" label="Fill Start less than Value" max="1" min="0" value=".7" step="0.1" fill-start="0.25" variant="filled" ></sp-slider>
Fill Start with 0 and negative minimum range #
<sp-slider label="Fill Start with 0" max="1" min="-1" value=".7" step="0.1" fill-start="0" variant="filled" ></sp-slider>
Tick #
<sp-slider label="Slider Label" variant="tick" tick-step="5"></sp-slider> <sp-slider label="Slider Label - Disabled" variant="tick" tick-step="5" disabled ></sp-slider>
Tick with Labels #
<sp-slider label="Slider Label" variant="tick" tick-step="5" tick-labels ></sp-slider> <sp-slider label="Slider Label - Disabled" variant="tick" tick-step="5" tick-labels disabled ></sp-slider>
Ramp #
<sp-slider label="Slider Label" variant="ramp"></sp-slider> <sp-slider label="Slider Label - Disabled" variant="ramp" disabled></sp-slider>
Editable #
An <sp-slider>
element can be paired with an <sp-number-field>
element via the editable
attribute. The <sp-number-field>
will be passed all of the standard options from the <sp-slider>
element (e.g. min
, max
, formatOptions
, etc.) and will also accept the hide-stepper
attribute in order to prevent the display of its stepper UI.
<sp-slider label="Angle (editable)" editable hide-stepper min="0" max="360" format-options='{ "style": "unit", "unit": "degree", "unitDisplay": "narrow" }' ></sp-slider> <sp-slider label="Hours of the day (editable)" editable max="24" min="0" value="7.25" step="0.25" style="--spectrum-slider-editable-number-field-width: 100px;" format-options='{ "style": "unit", "unit": "hour" }' ></sp-slider>
Quiet #
<sp-slider quiet editable value="50"></sp-slider> <sp-slider quiet disabled editable value="50"></sp-slider>
Default value #
Slider will reset to its default-value
when the user double clicks on the slider handle or if the user presses the escape
key when the slider handle is focused.
<sp-slider value="50" default-value="20"></sp-slider>
Note: If a slider with default-value
attribute is contained in a modal and the slider-handle is focused then the following interaction will occur on pressing the escape
key:
- If the slider value is different from the default value then the slider value will be reset to the default value and the modal will not be closed.
- If the slider value is equal to the default value then the modal will be closed.
Indeterminate #
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>
.
<sp-slider indeterminate editable value="50"></sp-slider> <sp-slider indeterminate disabled editable value="50"></sp-slider>
Advanced normalization #
By default, sp-slider
assumes a linear scale between the min
and max
values. For advanced applications, it is sometimes necessary to specify a custom "normalization."
Normalization is the process of converting a slider to a value between 0 and 1 where 0 represents the minimum and 1 represents the maximum. See the
Labels and Formatting #
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.
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>
<sp-slider min="0" max="1" step="0.01" value="0.5" label="Slider Label" format-options='{ "style": "percent" }' ></sp-slider>
More advanced formatting is available by specifying a formatting function to the getAriaHandleText
property on an sp-slider
or sp-slider-handle
. Or, for a multi-handle slider, you can format the combined value label for all handles by passing a formatting function to the getAriaValueText
property on the parent sp-slider
.
Units not included in Intl.NumberFormatOptions
#
While Intl.NumberFormatOptions
does support a pixel
, pixels
, points
, etc.) that are not supported therein. When this occurs, an <sp-slider>
element will attempt to polyfill support for this unit. See the following example delivering { style: "unit", unit: "px" }
below:
<sp-slider style="width: 200px" value="500" format-options='{ "style": "unit", "unit": "px" }' > Document width in pixels </sp-slider>
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.
Label Visibility #
By default, an <sp-slider>
element has both a "text" label and a "value" label. The "value" label is output by the element itself based on its state, but the "text" label must be supplied by the consuming developer in order for the <sp-slider>
to be delivered in an accessible manner.
Either or both of these can be suppressed visually as needed by your application UI, while still fulfilling their role in delivering a quality accessibility tree to the browser. This delivery is controlled by the label-visibility
attribute (or labelVisibility
property) which accepts text
, value
, or none
as values.
Use label-visibility="text"
to suppress the "value" label:
<sp-slider label="No visible value label" label-visibility="text" value="50" ></sp-slider>
Use label-visibility="value"
to suppress the "text" label:
<sp-slider label="No visible text label" label-visibility="value"></sp-slider>
Use label-visibility="none"
to suppress the "text" label:
<sp-slider label="No visible labels" label-visibility="none"></sp-slider>
In each case outlined above the content for both labels will be made available to screen readers, so be sure to manage the content delivered to visitors in that context.
Events #
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:
const slider = document.querySelector('sp-slider'); const endListener = ({ target }) => { target.addEventListener('input', startListener); target.removeEventListener('input', streamListener); target.removeEventListener('change', endListener); console.log(target.value); }; const streamListener = ({ target }) => { console.log(target.value); }; const startListener = ({ target }) => { target.removeEventListener('input', startListener); target.addEventListener('input', streamListener); target.addEventListener('change', endListener); console.log(target.value); }; slider.addEventListener('input', startListener);