@spectrum-web-components/slider 0.0.0-20241209155954

package/README.md

@@ -0,0 +1,386 @@
+## 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
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/slider?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/slider)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/slider?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/slider)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/U7LQv7LsAVBwJayJXG3B/src/index.ts)
+
+```
+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-tabs selected="m" auto label="Size Attribute Options">
+<sp-tab value="s">Small</sp-tab>
+<sp-tab-panel value="s">
+
+```html
+<sp-slider label="Slider Label" size="s"></sp-slider>
+<sp-slider label="Slider Label - Editable" editable size="s"></sp-slider>
+```
+
+</sp-tab-panel>
+<sp-tab value="m">Medium</sp-tab>
+<sp-tab-panel value="m">
+
+```html
+<sp-slider label="Slider Label"></sp-slider>
+<sp-slider label="Slider Label - Editable" editable></sp-slider>
+```
+
+</sp-tab-panel>
+<sp-tab value="l">Large</sp-tab>
+<sp-tab-panel value="l">
+
+```html
+<sp-slider label="Slider Label" size="l"></sp-slider>
+<sp-slider label="Slider Label - Editable" editable size="l"></sp-slider>
+```
+
+</sp-tab-panel>
+<sp-tab value="xl">Extra Large</sp-tab>
+<sp-tab-panel value="xl">
+
+```html
+<sp-slider label="Slider Label" size="xl"></sp-slider>
+<sp-slider label="Slider Label - Editable" editable size="xl"></sp-slider>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
+## Variants
+
+### Standard
+
+```html
+<sp-slider label="Slider Label"></sp-slider>
+<sp-slider label="Slider Label - Disabled" disabled></sp-slider>
+```
+
+### Filled
+
+```html
+<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.
+
+```html
+<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 [custom normalization](#advanced-normalization) function is provided, it will also normalize all fill-related params.
+
+#### Fill Start greater than value
+
+```html
+<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
+
+```html
+<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
+
+```html
+<sp-slider
+    label="Fill Start with 0"
+    max="1"
+    min="-1"
+    value=".7"
+    step="0.1"
+    fill-start="0"
+    variant="filled"
+></sp-slider>
+```
+
+### Tick
+
+```html
+<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
+
+```html
+<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
+
+```html
+<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.
+
+```html
+<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
+
+```html
+<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.
+
+```html
+<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>`.
+
+```html
+<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 <a href="../../storybook/index.html?path=/story/slider--three-handles-complex" target="_blank">"Three Handles Complex" example in the playground</a>.
+
+## 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>`](./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.
+
+```html
+<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 [wide range of units](https://tc39.es/proposal-unified-intl-numberformat/section6/locales-currencies-tz_proposed_out.html#sec-issanctionedsimpleunitidentifier), it is possible to encounter units (e.g. the graphics units of `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:
+
+```html
+<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:
+
+```html
+<sp-slider
+    label="No visible value label"
+    label-visibility="text"
+    value="50"
+></sp-slider>
+```
+
+Use `label-visibility="value"` to suppress the "text" label:
+
+```html
+<sp-slider label="No visible text label" label-visibility="value"></sp-slider>
+```
+
+Use `label-visibility="none"` to suppress the "text" label:
+
+```html
+<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:
+
+```javascript
+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);
+```

package/package.json

@@ -0,0 +1,96 @@
+{
+    "name": "@spectrum-web-components/slider",
+    "version": "0.0.0-20241209155954",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/slider"
+    },
+    "author": "",
+    "homepage": "https://opensource.adobe.com/spectrum-web-components/components/slider",
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "main": "./src/index.js",
+    "module": "./src/index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./package.json": "./package.json",
+        "./src/HandleController.js": {
+            "development": "./src/HandleController.dev.js",
+            "default": "./src/HandleController.js"
+        },
+        "./src/Slider.js": {
+            "development": "./src/Slider.dev.js",
+            "default": "./src/Slider.js"
+        },
+        "./src/SliderHandle.js": {
+            "development": "./src/SliderHandle.dev.js",
+            "default": "./src/SliderHandle.js"
+        },
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./src/slider-overrides.css.js": "./src/slider-overrides.css.js",
+        "./src/slider.css.js": "./src/slider.css.js",
+        "./sp-slider.js": {
+            "development": "./sp-slider.dev.js",
+            "default": "./sp-slider.js"
+        },
+        "./sp-slider-handle.js": {
+            "development": "./sp-slider-handle.dev.js",
+            "default": "./sp-slider-handle.js"
+        },
+        "./sync/sp-slider.js": {
+            "development": "./sync/sp-slider.dev.js",
+            "default": "./sync/sp-slider.js"
+        }
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "files": [
+        "**/*.d.ts",
+        "**/*.js",
+        "**/*.js.map",
+        "custom-elements.json",
+        "!stories/",
+        "!test/"
+    ],
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "dependencies": {
+        "@internationalized/number": "^3.6.0",
+        "@lit-labs/observers": "^2.0.2",
+        "@spectrum-web-components/base": "0.0.0-20241209155954",
+        "@spectrum-web-components/field-label": "0.0.0-20241209155954",
+        "@spectrum-web-components/number-field": "0.0.0-20241209155954",
+        "@spectrum-web-components/reactive-controllers": "0.0.0-20241209155954",
+        "@spectrum-web-components/shared": "0.0.0-20241209155954",
+        "@spectrum-web-components/theme": "0.0.0-20241209155954"
+    },
+    "devDependencies": {
+        "@spectrum-css/slider": "^6.0.0-s2-foundations.17"
+    },
+    "types": "./src/index.d.ts",
+    "customElements": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js",
+        "./**/*.dev.js",
+        "./sync/sp-*.js"
+    ]
+}

package/sp-slider-handle.d.ts

@@ -0,0 +1,6 @@
+import { SliderHandle } from './src/SliderHandle.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-slider-handle': SliderHandle;
+    }
+}

package/sp-slider-handle.dev.js

@@ -0,0 +1,5 @@
+"use strict";
+import { SliderHandle } from "./src/SliderHandle.dev.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+defineElement("sp-slider-handle", SliderHandle);
+//# sourceMappingURL=sp-slider-handle.dev.js.map

package/sp-slider-handle.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-slider-handle.ts"],
+  "sourcesContent": ["/*\nCopyright 2021 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { SliderHandle } from './src/SliderHandle.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-slider-handle', SliderHandle);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-slider-handle': SliderHandle;\n    }\n}\n"],
+  "mappings": ";AAWA,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAE9B,cAAc,oBAAoB,YAAY;",
+  "names": []
+}

package/sp-slider-handle.js

@@ -0,0 +1,2 @@
+"use strict";import{SliderHandle as e}from"./src/SliderHandle.js";import{defineElement as l}from"@spectrum-web-components/base/src/define-element.js";l("sp-slider-handle",e);
+//# sourceMappingURL=sp-slider-handle.js.map

package/sp-slider-handle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-slider-handle.ts"],
+  "sourcesContent": ["/*\nCopyright 2021 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { SliderHandle } from './src/SliderHandle.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-slider-handle', SliderHandle);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-slider-handle': SliderHandle;\n    }\n}\n"],
+  "mappings": "aAWA,OAAS,gBAAAA,MAAoB,wBAC7B,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,mBAAoBD,CAAY",
+  "names": ["SliderHandle", "defineElement"]
+}

package/sp-slider.d.ts

@@ -0,0 +1,7 @@
+import './sp-slider-handle.js';
+import { Slider } from './src/Slider.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-slider': Slider;
+    }
+}

package/sp-slider.dev.js

@@ -0,0 +1,6 @@
+"use strict";
+import "./sp-slider-handle.dev.js";
+import { Slider } from "./src/Slider.dev.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+defineElement("sp-slider", Slider);
+//# sourceMappingURL=sp-slider.dev.js.map

package/sp-slider.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-slider.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport './sp-slider-handle.dev.js' // codify sp-slider's implicit dependency on sp-slider-handle\nimport { Slider } from './src/Slider.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-slider', Slider);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-slider': Slider;\n    }\n}\n"],
+  "mappings": ";AAWA,OAAO;AACP,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,cAAc,aAAa,MAAM;",
+  "names": []
+}

package/sp-slider.js

@@ -0,0 +1,2 @@
+"use strict";import"./sp-slider-handle.js";import{Slider as e}from"./src/Slider.js";import{defineElement as r}from"@spectrum-web-components/base/src/define-element.js";r("sp-slider",e);
+//# sourceMappingURL=sp-slider.js.map

package/sp-slider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-slider.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport './sp-slider-handle.js'; // codify sp-slider's implicit dependency on sp-slider-handle\nimport { Slider } from './src/Slider.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-slider', Slider);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-slider': Slider;\n    }\n}\n"],
+  "mappings": "aAWA,MAAO,wBACP,OAAS,UAAAA,MAAc,kBACvB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,YAAaD,CAAM",
+  "names": ["Slider", "defineElement"]
+}

package/src/HandleController.d.ts

@@ -0,0 +1,116 @@
+import { TemplateResult } from '@spectrum-web-components/base';
+import { Slider } from './Slider.js';
+import { SliderHandle, SliderNormalization } from './SliderHandle.js';
+interface RangeAndClamp {
+    range: {
+        min: number;
+        max: number;
+    };
+    clamp: {
+        min: number;
+        max: number;
+    };
+}
+interface ModelValue extends RangeAndClamp {
+    name: string;
+    value: number;
+    normalizedValue: number;
+    step: number;
+    highlight: boolean;
+    ariaLabel?: string;
+    normalization: SliderNormalization;
+    handle: SliderHandle;
+}
+interface InputWithModel extends HTMLInputElement {
+    model: ModelValue;
+}
+interface DataFromPointerEvent {
+    resolvedInput: boolean;
+    input: InputWithModel;
+    model?: ModelValue;
+}
+export interface HandleValueDictionary {
+    [key: string]: number;
+}
+export declare class HandleController {
+    private host;
+    private handles;
+    private model;
+    private handleOrder;
+    private draggingHandle?;
+    private handleRefMap?;
+    constructor(host: Slider);
+    get values(): HandleValueDictionary;
+    get size(): number;
+    inputForHandle(handle: SliderHandle): HTMLInputElement | undefined;
+    requestUpdate(): void;
+    /**
+     * It is possible for value attributes to be set programmatically. The <input>
+     * for a particular slider needs to have an opportunity to validate any such
+     * values
+     *
+     * @param handle Handle who's value needs validation
+     */
+    setValueFromHandle(handle: SliderHandle): void;
+    handleHasChanged(handle: SliderHandle): void;
+    formattedValueForHandle(model: ModelValue): string;
+    get formattedValues(): Map<string, string>;
+    get focusElement(): HTMLElement;
+    protected handleOrientation: () => void;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdate(): void;
+    private waitForUpgrade;
+    private extractModelFromLightDom;
+    get activeHandle(): string;
+    get activeHandleInputId(): string;
+    activateHandle(name: string): void;
+    get activeHandleModel(): ModelValue;
+    private getActiveHandleElements;
+    private getHandleElements;
+    private clearHandleComponentCache;
+    private _boundingClientRect?;
+    private get boundingClientRect();
+    private updateBoundingRect;
+    /**
+     * Return the `input` and `model` associated with the event and
+     * whether the `input` is a `resolvedInput` meaning it was acquired
+     * from the `model` rather than the event.
+     */
+    protected extractDataFromEvent(event: PointerEvent): DataFromPointerEvent;
+    private _activePointerEventData;
+    /**
+     * @description check for defaultvalue(value) property in sp-slider and reset on double click on sliderHandle
+     * @param event
+     */
+    handleDoubleClick(event: PointerEvent): void;
+    handlePointerdown(event: PointerEvent): void;
+    handlePointerup(event: PointerEvent): void;
+    handlePointermove(event: PointerEvent): void;
+    cancelDrag(model?: ModelValue): void;
+    /**
+     * Keep the slider value property in sync with the input element's value
+     */
+    private onInputChange;
+    private onInputFocus;
+    private onInputBlur;
+    private onInputKeydown;
+    private dispatchChangeEvent;
+    /**
+     * Returns the value under the cursor
+     * @param: PointerEvent on slider
+     * @return: Slider value that correlates to the position under the pointer
+     */
+    private calculateHandlePosition;
+    renderHandle(model: ModelValue, index: number, zIndex: number, isMultiHandle: boolean): TemplateResult;
+    render(): TemplateResult[];
+    /**
+     * Returns a list of track segment [start, end] tuples where the values are
+     * normalized to be between 0 and 1.
+     * @returns A list of track segment tuples [start, end]
+     */
+    trackSegments(): [number, number][];
+    private updateModel;
+    handleUpdatesComplete(): Promise<void>;
+}
+export {};