@spectrum-web-components/slider - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

CHANGELOG.md

@@ -6,8 +6,20 @@ # Change Log
 
-## 0.1.3 (2019-10-03)
+# [0.2.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/slider@0.1.3...@spectrum-web-components/slider@0.2.0) (2019-10-14)
 
-**Note:** Version bump only for package @spectrum-web-components/slider
+### Bug Fixes
 
+-   **slider:** manage value and max changing in unison ([4359fbe](https://github.com/adobe/spectrum-web-components/commit/4359fbe))
+
+### Features
+
+-   **slider:** add "ramp" and "tick" variant support ([bb98bb6](https://github.com/adobe/spectrum-web-components/commit/bb98bb6))
+-   **slider:** mouse event fallback from pointer events ([b69e7fc](https://github.com/adobe/spectrum-web-components/commit/b69e7fc))
+-   **slider:** support tick labels and tick steps ([1ccf8d6](https://github.com/adobe/spectrum-web-components/commit/1ccf8d6))
+
+### Performance Improvements
+
+-   use imported TypeScript helpers instead of inlining them ([cc2bd0a](https://github.com/adobe/spectrum-web-components/commit/cc2bd0a))
+
 ## 0.1.3 (2019-10-03)
 
 **Note:** Version bump only for package @spectrum-web-components/slider

lib/slider.d.ts

@@ -1,4 +0,5 @@
-import { CSSResultArray, TemplateResult } from 'lit-element';
+import { CSSResultArray, TemplateResult, PropertyValues } from 'lit-element';
 import { Focusable } from '@spectrum-web-components/shared/lib/focusable.js';
 export declare type SliderEventDetail = number;
+export declare const variants: string[];
 export declare class Slider extends Focusable {
@@ -10,2 +11,3 @@ static readonly styles: CSSResultArray;
     variant: string;
+    private _variant;
     label: string;
@@ -16,2 +18,4 @@ ariaLabel?: string;
     step: number;
+    tickStep: number;
+    tickLabels: boolean;
     disabled: boolean;
@@ -22,5 +26,12 @@ dragging: boolean;
     private input;
+    private supportsPointerEvent;
+    private currentMouseEvent?;
     readonly focusElement: HTMLElement;
     protected render(): TemplateResult;
+    protected updated(changedProperties: PropertyValues): void;
     private renderLabel;
+    private renderTrackLeft;
+    private renderTrackRight;
+    private renderRamp;
+    private renderTicks;
     private renderHandle;
@@ -30,4 +41,8 @@ private renderTrack;
     private onPointerDown;
+    private onMouseDown;
+    private _trackMouseEvent;
     private onPointerUp;
+    private onMouseUp;
     private onPointerMove;
+    private onMouseMove;
     private onPointerCancel;
@@ -39,2 +54,3 @@ /**
     private onTrackPointerDown;
+    private onTrackMouseDown;
     /**
@@ -41,0 +57,0 @@ * Keep the slider value property in sync with the input element's value

lib/slider.js

@@ -12,8 +12,3 @@ /*
 */
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import { __decorate } from "tslib";
 import { html, property, query, } from 'lit-element';
@@ -23,2 +18,3 @@ import spectrumSliderStyles from './spectrum-slider.css.js';
 import { Focusable } from '@spectrum-web-components/shared/lib/focusable.js';
+export const variants = ['color', 'filled', 'ramp', 'range', 'tick'];
 export class Slider extends Focusable {
@@ -29,3 +25,4 @@ constructor() {
         this._value = 10;
-        this.variant = '';
+        /* Ensure that a '' value for `variant` removes the attribute instead of a blank value */
+        this._variant = '';
         this.label = '';
@@ -35,5 +32,24 @@ this.max = 20;
         this.step = 1;
+        this.tickStep = 0;
+        this.tickLabels = false;
         this.disabled = false;
         this.dragging = false;
         this.handleHighlight = false;
+        this.supportsPointerEvent = 'setPointerCapture' in this;
+        this.onMouseUp = (ev) => {
+            // Retain focus on input element after mouse up to enable keyboard interactions
+            this.input.focus();
+            this.currentMouseEvent = ev;
+            document.removeEventListener('mousemove', this.onMouseMove);
+            document.removeEventListener('mouseup', this.onMouseUp);
+            requestAnimationFrame(() => {
+                this.handleHighlight = false;
+                this.dragging = false;
+                this.dispatchChangeEvent();
+            });
+        };
+        this.onMouseMove = (ev) => {
+            this.currentMouseEvent = ev;
+            this.dispatchInputEvent();
+        };
     }
@@ -51,5 +67,23 @@ static get styles() {
         }
-        this._value = this.clampValue(value);
+        this._value = value;
         this.requestUpdate('value', oldValue);
     }
+    set variant(variant) {
+        const oldVariant = this.variant;
+        if (variant === this.variant) {
+            return;
+        }
+        if (variants.includes(variant)) {
+            this.setAttribute('variant', variant);
+            this._variant = variant;
+        }
+        else {
+            this.removeAttribute('variant');
+            this._variant = '';
+        }
+        this.requestUpdate('variant', oldVariant);
+    }
+    get variant() {
+        return this._variant;
+    }
     get focusElement() {
@@ -66,2 +100,7 @@ return this.input ? this.input : this;
     }
+    updated(changedProperties) {
+        if (changedProperties.has('value')) {
+            this.value = this.clampValue(this.value);
+        }
+    }
     renderLabel() {
@@ -82,2 +121,71 @@ return html `
     }
+    renderTrackLeft() {
+        if (this.variant === 'ramp') {
+            return html ``;
+        }
+        return html `
+            <div
+                class="track"
+                id="track-left"
+                style=${this.trackLeftStyle}
+                role="presentation"
+            ></div>
+        `;
+    }
+    renderTrackRight() {
+        if (this.variant === 'ramp') {
+            return html ``;
+        }
+        return html `
+            <div
+                class="track"
+                id="track-right"
+                style=${this.trackRightStyle}
+                role="presentation"
+            ></div>
+        `;
+    }
+    renderRamp() {
+        if (this.variant !== 'ramp') {
+            return html ``;
+        }
+        return html `
+            <div id="ramp">
+                <svg
+                    viewBox="0 0 240 16"
+                    preserveAspectRatio="none"
+                    aria-hidden="true"
+                    focusable="false"
+                >
+                    <path
+                        d="M240,4v8c0,2.3-1.9,4.1-4.2,4L1,9C0.4,9,0,8.5,0,8c0-0.5,0.4-1,1-1l234.8-7C238.1-0.1,240,1.7,240,4z"
+                    ></path>
+                </svg>
+            </div>
+        `;
+    }
+    renderTicks() {
+        if (this.variant !== 'tick') {
+            return html ``;
+        }
+        const tickStep = this.tickStep || this.step;
+        const tickCount = (this.max - this.min) / tickStep;
+        const ticks = new Array(tickCount + 1);
+        ticks.fill(0, 0, tickCount + 1);
+        return html `
+            <div class="ticks">
+                ${ticks.map((tick, i) => html `
+                        <div class="tick">
+                            ${this.tickLabels
+            ? html `
+                                      <div class="tickLabel">
+                                          ${i * tickStep}
+                                      </div>
+                                  `
+            : html ``}
+                        </div>
+                    `)}
+            </div>
+        `;
+    }
     renderHandle() {
@@ -90,2 +198,3 @@ return html `
                 @pointerdown=${this.onPointerDown}
+                @mousedown=${this.onMouseDown}
                 @pointerup=${this.onPointerUp}
@@ -116,16 +225,12 @@ @pointercancel=${this.onPointerCancel}
         return html `
-            <div id="controls" @pointerdown=${this.onTrackPointerDown}>
-                <div class="track" id="track-left"
-                    style=${this.trackLeftStyle} 
-                    role="presentation"
-                >
-                </div>
+            <div id="controls"
+                @pointerdown=${this.onTrackPointerDown}
+                @mousedown=${this.onTrackMouseDown}
+            >
+                ${this.renderTrackLeft()}
+                ${this.renderRamp()}
+                ${this.renderTicks()}
                 ${this.renderHandle()}
-                <div class="track"
-                    id="track-right"
-                    style=${this.trackRightStyle}
-                    role="presentation"
-                >
+                ${this.renderTrackRight()}
                 </div>
-                </div>
             </div>
@@ -150,2 +255,24 @@ `;
     }
+    onMouseDown(ev) {
+        if (this.supportsPointerEvent) {
+            return;
+        }
+        if (this.disabled) {
+            return;
+        }
+        document.addEventListener('mousemove', this.onMouseMove);
+        document.addEventListener('mouseup', this.onMouseUp);
+        this.input.focus();
+        this.dragging = true;
+        this.currentMouseEvent = ev;
+        this._trackMouseEvent();
+    }
+    _trackMouseEvent() {
+        if (!this.currentMouseEvent || !this.dragging) {
+            return;
+        }
+        this.value = this.calculateHandlePosition(this.currentMouseEvent);
+        this.dispatchInputEvent();
+        requestAnimationFrame(() => this._trackMouseEvent());
+    }
     onPointerUp(ev) {
@@ -164,3 +291,2 @@ // Retain focus on input element after mouse up to enable keyboard interactions
         this.value = this.calculateHandlePosition(ev);
-        this.dispatchInputEvent();
     }
@@ -184,2 +310,15 @@ onPointerCancel(ev) {
     }
+    onTrackMouseDown(ev) {
+        if (this.supportsPointerEvent) {
+            return;
+        }
+        if (ev.target === this.handle || this.disabled) {
+            return;
+        }
+        document.addEventListener('mousemove', this.onMouseMove);
+        document.addEventListener('mouseup', this.onMouseUp);
+        this.dragging = true;
+        this.currentMouseEvent = ev;
+        this._trackMouseEvent();
+    }
     /**
@@ -271,4 +410,4 @@ * Keep the slider value property in sync with the input element's value
 __decorate([
-    property({ reflect: true })
-], Slider.prototype, "variant", void 0);
+    property({ type: String })
+], Slider.prototype, "variant", null);
 __decorate([
@@ -290,2 +429,8 @@ property()
 __decorate([
+    property({ type: Number, attribute: 'tick-step' })
+], Slider.prototype, "tickStep", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'tick-labels' })
+], Slider.prototype, "tickLabels", void 0);
+__decorate([
     property({ type: Boolean, reflect: true })
@@ -292,0 +437,0 @@ ], Slider.prototype, "disabled", void 0);

lib/spectrum-slider.css.js

@@ -31,8 +31,8 @@ /*
 var(--spectrum-global-dimension-size-200))/-2/4);left:calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/-2/4);overflow:hidden;opacity:.000001;cursor:default;-webkit-appearance:none;border:0;pointer-events:none;background:transparent}#input:focus{outline:none}#labelContainer{display:flex;position:relative;width:auto;padding-top:var(--spectrum-fieldlabel-padding-top,var(--spectrum-global-dimension-size-50));font-size:var(--spectrum-label-text-size,var(--spectrum-global-dimension-size-150));line-height:var(--spectrum-label-text-line-height,1.3);color:var(--spectrum-label-text-color,var(--spectrum-global-color-gray-700))}#label{padding-left:0;flex-grow:1}#value{flex-grow:0;padding-right:0;cursor:default;margin-left:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200))}.spectrum-Slider-ticks{display:flex;justify-content:space-between;z-index:0;margin:0 calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2*-1);margin-top:calc(var(--spectrum-slider-tick-mark-height, 10px) + var(--spectrum-slider-track-height, 2px)/2)}#tick{position:relative}#tick,#tick:after{width:var(--spectrum-slider-tick-mark-width,2px)}#tick:after{display:block;position:absolute;top:0;left:calc(50% - var(--spectrum-slider-tick-mark-width, 2px)/2);content:"";height:var(--spectrum-slider-tick-mark-height,10px);border-radius:var(--spectrum-slider-tick-mark-border-radius,1px);background-color:var(--spectrum-slider-tick-mark-color,var(--spectrum-global-color-gray-300))}#tick #tickLabel{display:flex;align-items:center;justify-content:center;margin:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200)) calc(var(--spectrum-slider-label-gap-x,
+var(--spectrum-global-dimension-size-200))/-2/4);overflow:hidden;opacity:.000001;cursor:default;-webkit-appearance:none;border:0;pointer-events:none;background:transparent}#input:focus{outline:none}#labelContainer{display:flex;position:relative;width:auto;padding-top:var(--spectrum-fieldlabel-padding-top,var(--spectrum-global-dimension-size-50));font-size:var(--spectrum-label-text-size,var(--spectrum-global-dimension-size-150));line-height:var(--spectrum-label-text-line-height,1.3);color:var(--spectrum-label-text-color,var(--spectrum-global-color-gray-700))}#label{padding-left:0;flex-grow:1}#value{flex-grow:0;padding-right:0;cursor:default;margin-left:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200))}.ticks{display:flex;justify-content:space-between;z-index:0;margin:0 calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2*-1);margin-top:calc(var(--spectrum-slider-tick-mark-height, 10px) + var(--spectrum-slider-track-height, 2px)/2)}.tick{position:relative}.tick,.tick:after{width:var(--spectrum-slider-tick-mark-width,2px)}.tick:after{display:block;position:absolute;top:0;left:calc(50% - var(--spectrum-slider-tick-mark-width, 2px)/2);content:"";height:var(--spectrum-slider-tick-mark-height,10px);border-radius:var(--spectrum-slider-tick-mark-border-radius,1px);background-color:var(--spectrum-slider-tick-mark-color,var(--spectrum-global-color-gray-300))}.tick .tickLabel{display:flex;align-items:center;justify-content:center;margin:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200)) calc(var(--spectrum-slider-label-gap-x,
 var(--spectrum-global-dimension-size-200))*-1) 0 calc(var(--spectrum-slider-label-gap-x,
-var(--spectrum-global-dimension-size-200))*-1);font-size:var(--spectrum-label-text-size,var(--spectrum-global-dimension-size-150));line-height:var(--spectrum-label-text-line-height,1.3)}#tick:first-of-type #tickLabel,#tick:last-of-type #tickLabel{display:block;position:absolute;margin:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200)) 0 0 0}#tick:first-of-type #tickLabel{left:0}#tick:last-of-type #tickLabel{right:0}:host([variant=color]) #labelContainer,:host([variant=color]) .spectrum-Dial-labelContainer{padding-bottom:var(--spectrum-fieldlabel-padding-bottom,var(--spectrum-global-dimension-size-65))}:host([variant=color]) #controls,:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls,:host([variant=color]) .spectrum-Dial-controls:before,:host([variant=color]) .track{min-height:auto;height:var(--spectrum-slider-color-track-height,24px);margin-left:0;width:100%}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before{display:block;content:""}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before,:host([variant=color]) .track{top:0;padding:0;margin-top:0;margin-right:0;border-radius:var(--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50))}:host([variant=color]) #handle,:host([variant=color]) .spectrum-Dial-handle{top:50%}:host([disabled]){cursor:default}:host([disabled]) #handle,:host([disabled]) .spectrum-Dial-handle{cursor:default;pointer-events:none}:host([disabled][variant=color]) #handle:active,:host([disabled][variant=color]) #handle:hover,:host([disabled][variant=color]) .spectrum-Dial-handle:active,:host([disabled][variant=color]) .spectrum-Dial-handle:hover{border-width:var(--spectrum-slider-color-handle-outset-border-size,1px)}.track:before{background:var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300))}#fill:before,:host([variant=filled]) .track:first-child:before{background:var(--spectrum-slider-fill-track-color,var(--spectrum-global-color-gray-700))}#buffer:after,#buffer:before{background:var(--spectrum-slider-player-track-buffer-color,var(--spectrum-global-color-gray-500))}#ramp path{fill:var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300))}#handle:hover{border-color:var(--spectrum-slider-handle-border-color-hover,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle{border-color:var(--spectrum-slider-handle-border-color-key-focus,var(--spectrum-global-color-blue-400));background:var(--spectrum-slider-handle-background-color-key-focus,var(--spectrum-global-color-blue-400))}#handle:active,:host([dragging]) #handle{border-color:var(--spectrum-slider-handle-border-color-down,var(--spectrum-global-color-gray-800))}.spectrum-Slider--ramp #handle,.spectrum-Slider--ramp .spectrum-Dial-handle{box-shadow:0 0 0 4px var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}:host([dragging]) #handle{border-color:var(--spectrum-slider-handle-border-color-down,var(--spectrum-global-color-gray-800));background:var(--spectrum-slider-handle-background-color-down,transparent)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-fill-track-color,var(--spectrum-global-color-gray-700))}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before{background-color:var(--spectrum-global-color-static-white,#fff);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 0),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 0),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 0),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 0);background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px);background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px) calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)),calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)) 0;z-index:0}:host([variant=color]) .track{background-color:initial;background-image:linear-gradient(90deg,var(--spectrum-slider-color-track-background-color-gradient-start,var(--spectrum-global-color-blue-400)),var(--spectrum-slider-color-track-background-color-gradient-end,var(--spectrum-global-color-blue-700)));box-shadow:inset 0 0 0 1px var(--spectrum-slider-color-track-border-color,rgba(0,0,0,.05))}:host([variant=color]) .track:before{display:none}:host([variant=color]) #handle,:host([variant=color]) .spectrum-Dial-handle{box-shadow:inset 0 0 0 1px var(--spectrum-slider-color-handle-inset-border-color,rgba(0,0,0,.05)),0 0 0 1px var(--spectrum-slider-color-handle-outset-border-color,rgba(0,0,0,.05));border-color:var(--spectrum-slider-color-handle-border-color,var(--spectrum-global-color-gray-50));background:var(--spectrum-slider-color-handle-color,transparent)}:host([variant=color][handle-highlight]) #handle{box-shadow:0 0 0 1px var(--spectrum-slider-color-handle-outset-border-color-key-focus,rgba(0,0,0,.05))}:host([disabled]) #labelContainer,:host([disabled]) .spectrum-Dial-labelContainer{color:var(--spectrum-label-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([disabled]) #handle,:host([disabled]) .spectrum-Dial-handle{border-color:var(--spectrum-slider-handle-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}:host([disabled]) #handle:active,:host([disabled]) #handle:hover,:host([disabled]) .spectrum-Dial-handle:active,:host([disabled]) .spectrum-Dial-handle:hover{border-color:var(--spectrum-slider-handle-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-slider-handle-background-color,transparent)}:host([disabled]) .track:before{background:var(--spectrum-slider-track-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #fill:before,:host([disabled][variant=filled]) .track:first-child:before{background:var(--spectrum-slider-fill-track-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #buffer:before{background:var(--spectrum-slider-player-track-buffer-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #ramp path{fill:var(--spectrum-slider-ramp-track-color-disabled,var(--spectrum-global-color-gray-200))}:host([disabled][variant=color]) .track{background:var(--spectrum-slider-color-track-color-disabled,var(--spectrum-global-color-gray-200))!important;box-shadow:none}:host([disabled][variant=color]) #handle,:host([disabled][variant=color]) #handle:active,:host([disabled][variant=color]) #handle:hover,:host([disabled][variant=color]) .spectrum-Dial-handle,:host([disabled][variant=color]) .spectrum-Dial-handle:active,:host([disabled][variant=color]) .spectrum-Dial-handle:hover{background:var(--spectrum-slider-color-handle-color-disabled,transparent);box-shadow:none;border-color:var(--spectrum-slider-color-handle-border-color-disabled,var(--spectrum-global-color-gray-400))}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-fill-track-color-disabled,var(--spectrum-global-color-gray-300))}
+var(--spectrum-global-dimension-size-200))*-1);font-size:var(--spectrum-label-text-size,var(--spectrum-global-dimension-size-150));line-height:var(--spectrum-label-text-line-height,1.3)}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;position:absolute;margin:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200)) 0 0 0}.tick:first-of-type .tickLabel{left:0}.tick:last-of-type .tickLabel{right:0}:host([variant=color]) #labelContainer,:host([variant=color]) .spectrum-Dial-labelContainer{padding-bottom:var(--spectrum-fieldlabel-padding-bottom,var(--spectrum-global-dimension-size-65))}:host([variant=color]) #controls,:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls,:host([variant=color]) .spectrum-Dial-controls:before,:host([variant=color]) .track{min-height:auto;height:var(--spectrum-slider-color-track-height,24px);margin-left:0;width:100%}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before{display:block;content:""}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before,:host([variant=color]) .track{top:0;padding:0;margin-top:0;margin-right:0;border-radius:var(--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50))}:host([variant=color]) #handle,:host([variant=color]) .spectrum-Dial-handle{top:50%}:host([disabled]){cursor:default}:host([disabled]) #handle,:host([disabled]) .spectrum-Dial-handle{cursor:default;pointer-events:none}:host([disabled][variant=color]) #handle:active,:host([disabled][variant=color]) #handle:hover,:host([disabled][variant=color]) .spectrum-Dial-handle:active,:host([disabled][variant=color]) .spectrum-Dial-handle:hover{border-width:var(--spectrum-slider-color-handle-outset-border-size,1px)}.track:before{background:var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300))}#fill:before,:host([variant=filled]) .track:first-child:before{background:var(--spectrum-slider-fill-track-color,var(--spectrum-global-color-gray-700))}#buffer:after,#buffer:before{background:var(--spectrum-slider-player-track-buffer-color,var(--spectrum-global-color-gray-500))}#ramp path{fill:var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300))}#handle:hover{border-color:var(--spectrum-slider-handle-border-color-hover,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle{border-color:var(--spectrum-slider-handle-border-color-key-focus,var(--spectrum-global-color-blue-400));background:var(--spectrum-slider-handle-background-color-key-focus,var(--spectrum-global-color-blue-400))}#handle:active,:host([dragging]) #handle{border-color:var(--spectrum-slider-handle-border-color-down,var(--spectrum-global-color-gray-800))}:host([variant=ramp]) #handle,:host([variant=ramp]) .spectrum-Dial-handle{box-shadow:0 0 0 4px var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}:host([dragging]) #handle{border-color:var(--spectrum-slider-handle-border-color-down,var(--spectrum-global-color-gray-800));background:var(--spectrum-slider-handle-background-color-down,transparent)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-fill-track-color,var(--spectrum-global-color-gray-700))}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before{background-color:var(--spectrum-global-color-static-white,#fff);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 0),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 0),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 0),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 0);background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px);background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px) calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)),calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)) 0;z-index:0}:host([variant=color]) .track{background-color:initial;background-image:linear-gradient(90deg,var(--spectrum-slider-color-track-background-color-gradient-start,var(--spectrum-global-color-blue-400)),var(--spectrum-slider-color-track-background-color-gradient-end,var(--spectrum-global-color-blue-700)));box-shadow:inset 0 0 0 1px var(--spectrum-slider-color-track-border-color,rgba(0,0,0,.05))}:host([variant=color]) .track:before{display:none}:host([variant=color]) #handle,:host([variant=color]) .spectrum-Dial-handle{box-shadow:inset 0 0 0 1px var(--spectrum-slider-color-handle-inset-border-color,rgba(0,0,0,.05)),0 0 0 1px var(--spectrum-slider-color-handle-outset-border-color,rgba(0,0,0,.05));border-color:var(--spectrum-slider-color-handle-border-color,var(--spectrum-global-color-gray-50));background:var(--spectrum-slider-color-handle-color,transparent)}:host([variant=color][handle-highlight]) #handle{box-shadow:0 0 0 1px var(--spectrum-slider-color-handle-outset-border-color-key-focus,rgba(0,0,0,.05))}:host([disabled]) #labelContainer,:host([disabled]) .spectrum-Dial-labelContainer{color:var(--spectrum-label-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([disabled]) #handle,:host([disabled]) .spectrum-Dial-handle{border-color:var(--spectrum-slider-handle-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}:host([disabled]) #handle:active,:host([disabled]) #handle:hover,:host([disabled]) .spectrum-Dial-handle:active,:host([disabled]) .spectrum-Dial-handle:hover{border-color:var(--spectrum-slider-handle-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-slider-handle-background-color,transparent)}:host([disabled]) .track:before{background:var(--spectrum-slider-track-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #fill:before,:host([disabled][variant=filled]) .track:first-child:before{background:var(--spectrum-slider-fill-track-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #buffer:before{background:var(--spectrum-slider-player-track-buffer-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #ramp path{fill:var(--spectrum-slider-ramp-track-color-disabled,var(--spectrum-global-color-gray-200))}:host([disabled][variant=color]) .track{background:var(--spectrum-slider-color-track-color-disabled,var(--spectrum-global-color-gray-200))!important;box-shadow:none}:host([disabled][variant=color]) #handle,:host([disabled][variant=color]) #handle:active,:host([disabled][variant=color]) #handle:hover,:host([disabled][variant=color]) .spectrum-Dial-handle,:host([disabled][variant=color]) .spectrum-Dial-handle:active,:host([disabled][variant=color]) .spectrum-Dial-handle:hover{background:var(--spectrum-slider-color-handle-color-disabled,transparent);box-shadow:none;border-color:var(--spectrum-slider-color-handle-border-color-disabled,var(--spectrum-global-color-gray-400))}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-fill-track-color-disabled,var(--spectrum-global-color-gray-300))}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-slider.css.js.map

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.1.3",
+    "version": "0.2.0",
     "description": "",
@@ -40,5 +40,6 @@ "main": "lib/index.js",
     "dependencies": {
-        "@spectrum-web-components/shared": "^0.1.3"
+        "@spectrum-web-components/shared": "^0.1.4",
+        "tslib": "^1.10.0"
     },
-    "gitHead": "5112887821c1408c1c4121949a4f91743c98ff6a"
+    "gitHead": "7c3e131bc2bc3b1195e736ff65d3c4e044590ace"
 }

README.md

@@ -10,1 +10,27 @@ ## Overview
 ```
+
+### Variants
+
+#### Filled
+
+```html
+<sp-slider variant="filled"></sp-slider>
+```
+
+#### Ramp
+
+```html
+<sp-slider variant="ramp"></sp-slider>
+```
+
+#### Tick
+
+```html
+<sp-slider variant="tick" tick-step="4"></sp-slider>
+```
+
+#### Tick w/ Labels
+
+```html
+<sp-slider variant="tick" tick-step="5" tick-labels></sp-slider>
+```

src/slider.ts

@@ -19,2 +19,3 @@ /*
     query,
+    PropertyValues,
 } from 'lit-element';
@@ -28,2 +29,4 @@
 
+export const variants = ['color', 'filled', 'ramp', 'range', 'tick'];
+
 export class Slider extends Focusable {
@@ -49,3 +52,3 @@ public static get styles(): CSSResultArray {
 
-        this._value = this.clampValue(value);
+        this._value = value;
         this.requestUpdate('value', oldValue);
@@ -56,5 +59,25 @@ }
 
-    @property({ reflect: true })
-    public variant = '';
+    @property({ type: String })
+    public set variant(variant: string) {
+        const oldVariant = this.variant;
+        if (variant === this.variant) {
+            return;
+        }
+        if (variants.includes(variant)) {
+            this.setAttribute('variant', variant);
+            this._variant = variant;
+        } else {
+            this.removeAttribute('variant');
+            this._variant = '';
+        }
+        this.requestUpdate('variant', oldVariant);
+    }
 
+    public get variant(): string {
+        return this._variant;
+    }
+
+    /* Ensure that a '' value for `variant` removes the attribute instead of a blank value */
+    private _variant = '';
+
     @property()
@@ -75,2 +98,8 @@ public label = '';
 
+    @property({ type: Number, attribute: 'tick-step' })
+    public tickStep = 0;
+
+    @property({ type: Boolean, attribute: 'tick-labels' })
+    public tickLabels = false;
+
     @property({ type: Boolean, reflect: true })
@@ -91,2 +120,5 @@ public disabled = false;
 
+    private supportsPointerEvent = 'setPointerCapture' in this;
+    private currentMouseEvent?: MouseEvent;
+
     public get focusElement(): HTMLElement {
@@ -105,2 +137,8 @@ return this.input ? this.input : this;
 
+    protected updated(changedProperties: PropertyValues): void {
+        if (changedProperties.has('value')) {
+            this.value = this.clampValue(this.value);
+        }
+    }
+
     private renderLabel(): TemplateResult {
@@ -122,2 +160,77 @@ return html`
 
+    private renderTrackLeft(): TemplateResult {
+        if (this.variant === 'ramp') {
+            return html``;
+        }
+        return html`
+            <div
+                class="track"
+                id="track-left"
+                style=${this.trackLeftStyle}
+                role="presentation"
+            ></div>
+        `;
+    }
+
+    private renderTrackRight(): TemplateResult {
+        if (this.variant === 'ramp') {
+            return html``;
+        }
+        return html`
+            <div
+                class="track"
+                id="track-right"
+                style=${this.trackRightStyle}
+                role="presentation"
+            ></div>
+        `;
+    }
+
+    private renderRamp(): TemplateResult {
+        if (this.variant !== 'ramp') {
+            return html``;
+        }
+        return html`
+            <div id="ramp">
+                <svg
+                    viewBox="0 0 240 16"
+                    preserveAspectRatio="none"
+                    aria-hidden="true"
+                    focusable="false"
+                >
+                    <path
+                        d="M240,4v8c0,2.3-1.9,4.1-4.2,4L1,9C0.4,9,0,8.5,0,8c0-0.5,0.4-1,1-1l234.8-7C238.1-0.1,240,1.7,240,4z"
+                    ></path>
+                </svg>
+            </div>
+        `;
+    }
+
+    private renderTicks(): TemplateResult {
+        if (this.variant !== 'tick') {
+            return html``;
+        }
+        const tickStep = this.tickStep || this.step;
+        const tickCount = (this.max - this.min) / tickStep;
+        const ticks = new Array(tickCount + 1);
+        ticks.fill(0, 0, tickCount + 1);
+        return html`
+            <div class="ticks">
+                ${ticks.map(
+                    (tick, i) => html`
+                        <div class="tick">
+                            ${this.tickLabels
+                                ? html`
+                                      <div class="tickLabel">
+                                          ${i * tickStep}
+                                      </div>
+                                  `
+                                : html``}
+                        </div>
+                    `
+                )}
+            </div>
+        `;
+    }
+
     private renderHandle(): TemplateResult {
@@ -130,2 +243,3 @@ return html`
                 @pointerdown=${this.onPointerDown}
+                @mousedown=${this.onMouseDown}
                 @pointerup=${this.onPointerUp}
@@ -157,16 +271,12 @@ @pointercancel=${this.onPointerCancel}
         return html`
-            <div id="controls" @pointerdown=${this.onTrackPointerDown}>
-                <div class="track" id="track-left"
-                    style=${this.trackLeftStyle} 
-                    role="presentation"
-                >
-                </div>
+            <div id="controls"
+                @pointerdown=${this.onTrackPointerDown}
+                @mousedown=${this.onTrackMouseDown}
+            >
+                ${this.renderTrackLeft()}
+                ${this.renderRamp()}
+                ${this.renderTicks()}
                 ${this.renderHandle()}
-                <div class="track"
-                    id="track-right"
-                    style=${this.trackRightStyle}
-                    role="presentation"
-                >
+                ${this.renderTrackRight()}
                 </div>
-                </div>
             </div>
@@ -194,2 +304,26 @@ `;
 
+    private onMouseDown(ev: MouseEvent): void {
+        if (this.supportsPointerEvent) {
+            return;
+        }
+        if (this.disabled) {
+            return;
+        }
+        document.addEventListener('mousemove', this.onMouseMove);
+        document.addEventListener('mouseup', this.onMouseUp);
+        this.input.focus();
+        this.dragging = true;
+        this.currentMouseEvent = ev;
+        this._trackMouseEvent();
+    }
+
+    private _trackMouseEvent(): void {
+        if (!this.currentMouseEvent || !this.dragging) {
+            return;
+        }
+        this.value = this.calculateHandlePosition(this.currentMouseEvent);
+        this.dispatchInputEvent();
+        requestAnimationFrame(() => this._trackMouseEvent());
+    }
+
     private onPointerUp(ev: PointerEvent): void {
@@ -204,2 +338,15 @@ // Retain focus on input element after mouse up to enable keyboard interactions
 
+    private onMouseUp = (ev: MouseEvent): void => {
+        // Retain focus on input element after mouse up to enable keyboard interactions
+        this.input.focus();
+        this.currentMouseEvent = ev;
+        document.removeEventListener('mousemove', this.onMouseMove);
+        document.removeEventListener('mouseup', this.onMouseUp);
+        requestAnimationFrame(() => {
+            this.handleHighlight = false;
+            this.dragging = false;
+            this.dispatchChangeEvent();
+        });
+    };
+
     private onPointerMove(ev: PointerEvent): void {
@@ -210,5 +357,9 @@ if (!this.dragging) {
         this.value = this.calculateHandlePosition(ev);
-        this.dispatchInputEvent();
     }
 
+    private onMouseMove = (ev: MouseEvent): void => {
+        this.currentMouseEvent = ev;
+        this.dispatchInputEvent();
+    };
+
     private onPointerCancel(ev: PointerEvent): void {
@@ -234,2 +385,16 @@ this.dragging = false;
 
+    private onTrackMouseDown(ev: MouseEvent): void {
+        if (this.supportsPointerEvent) {
+            return;
+        }
+        if (ev.target === this.handle || this.disabled) {
+            return;
+        }
+        document.addEventListener('mousemove', this.onMouseMove);
+        document.addEventListener('mouseup', this.onMouseUp);
+        this.dragging = true;
+        this.currentMouseEvent = ev;
+        this._trackMouseEvent();
+    }
+
     /**
@@ -260,3 +425,3 @@ * Keep the slider value property in sync with the input element's value
      */
-    private calculateHandlePosition(ev: PointerEvent): number {
+    private calculateHandlePosition(ev: PointerEvent | MouseEvent): number {
         const rect = this.getBoundingClientRect();
@@ -263,0 +428,0 @@ const minOffset = rect.left;

src/spectrum-config.js

@@ -42,2 +42,4 @@ /*
                         '.spectrum-Slider--filled',
+                        '.spectrum-Slider--ramp',
+                        '.spectrum-Slider--tick',
                     ],
@@ -72,6 +74,2 @@ },
                 {
-                    selector: '.spectrum-Slider-tickLabel',
-                    name: 'tickLabel',
-                },
-                {
                     selector: '.spectrum-Slider-labelContainer',
@@ -88,6 +86,2 @@ name: 'labelContainer',
                 },
-                {
-                    selector: '.spectrum-Slider-tick',
-                    name: 'tick',
-                },
             ],
@@ -99,2 +93,14 @@ classes: [
                 },
+                {
+                    selector: '.spectrum-Slider-ticks',
+                    name: 'ticks',
+                },
+                {
+                    selector: '.spectrum-Slider-tick',
+                    name: 'tick',
+                },
+                {
+                    selector: '.spectrum-Slider-tickLabel',
+                    name: 'tickLabel',
+                },
             ],
@@ -101,0 +107,0 @@ exclude: [/^\.is-disabled/],

src/spectrum-slider.css.ts

@@ -31,7 +31,7 @@ /*
 var(--spectrum-global-dimension-size-200))/-2/4);left:calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/-2/4);overflow:hidden;opacity:.000001;cursor:default;-webkit-appearance:none;border:0;pointer-events:none;background:transparent}#input:focus{outline:none}#labelContainer{display:flex;position:relative;width:auto;padding-top:var(--spectrum-fieldlabel-padding-top,var(--spectrum-global-dimension-size-50));font-size:var(--spectrum-label-text-size,var(--spectrum-global-dimension-size-150));line-height:var(--spectrum-label-text-line-height,1.3);color:var(--spectrum-label-text-color,var(--spectrum-global-color-gray-700))}#label{padding-left:0;flex-grow:1}#value{flex-grow:0;padding-right:0;cursor:default;margin-left:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200))}.spectrum-Slider-ticks{display:flex;justify-content:space-between;z-index:0;margin:0 calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2*-1);margin-top:calc(var(--spectrum-slider-tick-mark-height, 10px) + var(--spectrum-slider-track-height, 2px)/2)}#tick{position:relative}#tick,#tick:after{width:var(--spectrum-slider-tick-mark-width,2px)}#tick:after{display:block;position:absolute;top:0;left:calc(50% - var(--spectrum-slider-tick-mark-width, 2px)/2);content:"";height:var(--spectrum-slider-tick-mark-height,10px);border-radius:var(--spectrum-slider-tick-mark-border-radius,1px);background-color:var(--spectrum-slider-tick-mark-color,var(--spectrum-global-color-gray-300))}#tick #tickLabel{display:flex;align-items:center;justify-content:center;margin:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200)) calc(var(--spectrum-slider-label-gap-x,
+var(--spectrum-global-dimension-size-200))/-2/4);overflow:hidden;opacity:.000001;cursor:default;-webkit-appearance:none;border:0;pointer-events:none;background:transparent}#input:focus{outline:none}#labelContainer{display:flex;position:relative;width:auto;padding-top:var(--spectrum-fieldlabel-padding-top,var(--spectrum-global-dimension-size-50));font-size:var(--spectrum-label-text-size,var(--spectrum-global-dimension-size-150));line-height:var(--spectrum-label-text-line-height,1.3);color:var(--spectrum-label-text-color,var(--spectrum-global-color-gray-700))}#label{padding-left:0;flex-grow:1}#value{flex-grow:0;padding-right:0;cursor:default;margin-left:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200))}.ticks{display:flex;justify-content:space-between;z-index:0;margin:0 calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2*-1);margin-top:calc(var(--spectrum-slider-tick-mark-height, 10px) + var(--spectrum-slider-track-height, 2px)/2)}.tick{position:relative}.tick,.tick:after{width:var(--spectrum-slider-tick-mark-width,2px)}.tick:after{display:block;position:absolute;top:0;left:calc(50% - var(--spectrum-slider-tick-mark-width, 2px)/2);content:"";height:var(--spectrum-slider-tick-mark-height,10px);border-radius:var(--spectrum-slider-tick-mark-border-radius,1px);background-color:var(--spectrum-slider-tick-mark-color,var(--spectrum-global-color-gray-300))}.tick .tickLabel{display:flex;align-items:center;justify-content:center;margin:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200)) calc(var(--spectrum-slider-label-gap-x,
 var(--spectrum-global-dimension-size-200))*-1) 0 calc(var(--spectrum-slider-label-gap-x,
-var(--spectrum-global-dimension-size-200))*-1);font-size:var(--spectrum-label-text-size,var(--spectrum-global-dimension-size-150));line-height:var(--spectrum-label-text-line-height,1.3)}#tick:first-of-type #tickLabel,#tick:last-of-type #tickLabel{display:block;position:absolute;margin:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200)) 0 0 0}#tick:first-of-type #tickLabel{left:0}#tick:last-of-type #tickLabel{right:0}:host([variant=color]) #labelContainer,:host([variant=color]) .spectrum-Dial-labelContainer{padding-bottom:var(--spectrum-fieldlabel-padding-bottom,var(--spectrum-global-dimension-size-65))}:host([variant=color]) #controls,:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls,:host([variant=color]) .spectrum-Dial-controls:before,:host([variant=color]) .track{min-height:auto;height:var(--spectrum-slider-color-track-height,24px);margin-left:0;width:100%}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before{display:block;content:""}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before,:host([variant=color]) .track{top:0;padding:0;margin-top:0;margin-right:0;border-radius:var(--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50))}:host([variant=color]) #handle,:host([variant=color]) .spectrum-Dial-handle{top:50%}:host([disabled]){cursor:default}:host([disabled]) #handle,:host([disabled]) .spectrum-Dial-handle{cursor:default;pointer-events:none}:host([disabled][variant=color]) #handle:active,:host([disabled][variant=color]) #handle:hover,:host([disabled][variant=color]) .spectrum-Dial-handle:active,:host([disabled][variant=color]) .spectrum-Dial-handle:hover{border-width:var(--spectrum-slider-color-handle-outset-border-size,1px)}.track:before{background:var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300))}#fill:before,:host([variant=filled]) .track:first-child:before{background:var(--spectrum-slider-fill-track-color,var(--spectrum-global-color-gray-700))}#buffer:after,#buffer:before{background:var(--spectrum-slider-player-track-buffer-color,var(--spectrum-global-color-gray-500))}#ramp path{fill:var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300))}#handle:hover{border-color:var(--spectrum-slider-handle-border-color-hover,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle{border-color:var(--spectrum-slider-handle-border-color-key-focus,var(--spectrum-global-color-blue-400));background:var(--spectrum-slider-handle-background-color-key-focus,var(--spectrum-global-color-blue-400))}#handle:active,:host([dragging]) #handle{border-color:var(--spectrum-slider-handle-border-color-down,var(--spectrum-global-color-gray-800))}.spectrum-Slider--ramp #handle,.spectrum-Slider--ramp .spectrum-Dial-handle{box-shadow:0 0 0 4px var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}:host([dragging]) #handle{border-color:var(--spectrum-slider-handle-border-color-down,var(--spectrum-global-color-gray-800));background:var(--spectrum-slider-handle-background-color-down,transparent)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-fill-track-color,var(--spectrum-global-color-gray-700))}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before{background-color:var(--spectrum-global-color-static-white,#fff);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 0),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 0),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 0),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 0);background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px);background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px) calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)),calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)) 0;z-index:0}:host([variant=color]) .track{background-color:initial;background-image:linear-gradient(90deg,var(--spectrum-slider-color-track-background-color-gradient-start,var(--spectrum-global-color-blue-400)),var(--spectrum-slider-color-track-background-color-gradient-end,var(--spectrum-global-color-blue-700)));box-shadow:inset 0 0 0 1px var(--spectrum-slider-color-track-border-color,rgba(0,0,0,.05))}:host([variant=color]) .track:before{display:none}:host([variant=color]) #handle,:host([variant=color]) .spectrum-Dial-handle{box-shadow:inset 0 0 0 1px var(--spectrum-slider-color-handle-inset-border-color,rgba(0,0,0,.05)),0 0 0 1px var(--spectrum-slider-color-handle-outset-border-color,rgba(0,0,0,.05));border-color:var(--spectrum-slider-color-handle-border-color,var(--spectrum-global-color-gray-50));background:var(--spectrum-slider-color-handle-color,transparent)}:host([variant=color][handle-highlight]) #handle{box-shadow:0 0 0 1px var(--spectrum-slider-color-handle-outset-border-color-key-focus,rgba(0,0,0,.05))}:host([disabled]) #labelContainer,:host([disabled]) .spectrum-Dial-labelContainer{color:var(--spectrum-label-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([disabled]) #handle,:host([disabled]) .spectrum-Dial-handle{border-color:var(--spectrum-slider-handle-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}:host([disabled]) #handle:active,:host([disabled]) #handle:hover,:host([disabled]) .spectrum-Dial-handle:active,:host([disabled]) .spectrum-Dial-handle:hover{border-color:var(--spectrum-slider-handle-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-slider-handle-background-color,transparent)}:host([disabled]) .track:before{background:var(--spectrum-slider-track-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #fill:before,:host([disabled][variant=filled]) .track:first-child:before{background:var(--spectrum-slider-fill-track-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #buffer:before{background:var(--spectrum-slider-player-track-buffer-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #ramp path{fill:var(--spectrum-slider-ramp-track-color-disabled,var(--spectrum-global-color-gray-200))}:host([disabled][variant=color]) .track{background:var(--spectrum-slider-color-track-color-disabled,var(--spectrum-global-color-gray-200))!important;box-shadow:none}:host([disabled][variant=color]) #handle,:host([disabled][variant=color]) #handle:active,:host([disabled][variant=color]) #handle:hover,:host([disabled][variant=color]) .spectrum-Dial-handle,:host([disabled][variant=color]) .spectrum-Dial-handle:active,:host([disabled][variant=color]) .spectrum-Dial-handle:hover{background:var(--spectrum-slider-color-handle-color-disabled,transparent);box-shadow:none;border-color:var(--spectrum-slider-color-handle-border-color-disabled,var(--spectrum-global-color-gray-400))}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-fill-track-color-disabled,var(--spectrum-global-color-gray-300))}
+var(--spectrum-global-dimension-size-200))*-1);font-size:var(--spectrum-label-text-size,var(--spectrum-global-dimension-size-150));line-height:var(--spectrum-label-text-line-height,1.3)}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;position:absolute;margin:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200)) 0 0 0}.tick:first-of-type .tickLabel{left:0}.tick:last-of-type .tickLabel{right:0}:host([variant=color]) #labelContainer,:host([variant=color]) .spectrum-Dial-labelContainer{padding-bottom:var(--spectrum-fieldlabel-padding-bottom,var(--spectrum-global-dimension-size-65))}:host([variant=color]) #controls,:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls,:host([variant=color]) .spectrum-Dial-controls:before,:host([variant=color]) .track{min-height:auto;height:var(--spectrum-slider-color-track-height,24px);margin-left:0;width:100%}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before{display:block;content:""}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before,:host([variant=color]) .track{top:0;padding:0;margin-top:0;margin-right:0;border-radius:var(--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50))}:host([variant=color]) #handle,:host([variant=color]) .spectrum-Dial-handle{top:50%}:host([disabled]){cursor:default}:host([disabled]) #handle,:host([disabled]) .spectrum-Dial-handle{cursor:default;pointer-events:none}:host([disabled][variant=color]) #handle:active,:host([disabled][variant=color]) #handle:hover,:host([disabled][variant=color]) .spectrum-Dial-handle:active,:host([disabled][variant=color]) .spectrum-Dial-handle:hover{border-width:var(--spectrum-slider-color-handle-outset-border-size,1px)}.track:before{background:var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300))}#fill:before,:host([variant=filled]) .track:first-child:before{background:var(--spectrum-slider-fill-track-color,var(--spectrum-global-color-gray-700))}#buffer:after,#buffer:before{background:var(--spectrum-slider-player-track-buffer-color,var(--spectrum-global-color-gray-500))}#ramp path{fill:var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300))}#handle:hover{border-color:var(--spectrum-slider-handle-border-color-hover,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle{border-color:var(--spectrum-slider-handle-border-color-key-focus,var(--spectrum-global-color-blue-400));background:var(--spectrum-slider-handle-background-color-key-focus,var(--spectrum-global-color-blue-400))}#handle:active,:host([dragging]) #handle{border-color:var(--spectrum-slider-handle-border-color-down,var(--spectrum-global-color-gray-800))}:host([variant=ramp]) #handle,:host([variant=ramp]) .spectrum-Dial-handle{box-shadow:0 0 0 4px var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}:host([dragging]) #handle{border-color:var(--spectrum-slider-handle-border-color-down,var(--spectrum-global-color-gray-800));background:var(--spectrum-slider-handle-background-color-down,transparent)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-fill-track-color,var(--spectrum-global-color-gray-700))}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before{background-color:var(--spectrum-global-color-static-white,#fff);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 0),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 0),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 0),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 0);background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px);background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px) calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)),calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)) 0;z-index:0}:host([variant=color]) .track{background-color:initial;background-image:linear-gradient(90deg,var(--spectrum-slider-color-track-background-color-gradient-start,var(--spectrum-global-color-blue-400)),var(--spectrum-slider-color-track-background-color-gradient-end,var(--spectrum-global-color-blue-700)));box-shadow:inset 0 0 0 1px var(--spectrum-slider-color-track-border-color,rgba(0,0,0,.05))}:host([variant=color]) .track:before{display:none}:host([variant=color]) #handle,:host([variant=color]) .spectrum-Dial-handle{box-shadow:inset 0 0 0 1px var(--spectrum-slider-color-handle-inset-border-color,rgba(0,0,0,.05)),0 0 0 1px var(--spectrum-slider-color-handle-outset-border-color,rgba(0,0,0,.05));border-color:var(--spectrum-slider-color-handle-border-color,var(--spectrum-global-color-gray-50));background:var(--spectrum-slider-color-handle-color,transparent)}:host([variant=color][handle-highlight]) #handle{box-shadow:0 0 0 1px var(--spectrum-slider-color-handle-outset-border-color-key-focus,rgba(0,0,0,.05))}:host([disabled]) #labelContainer,:host([disabled]) .spectrum-Dial-labelContainer{color:var(--spectrum-label-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([disabled]) #handle,:host([disabled]) .spectrum-Dial-handle{border-color:var(--spectrum-slider-handle-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}:host([disabled]) #handle:active,:host([disabled]) #handle:hover,:host([disabled]) .spectrum-Dial-handle:active,:host([disabled]) .spectrum-Dial-handle:hover{border-color:var(--spectrum-slider-handle-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-slider-handle-background-color,transparent)}:host([disabled]) .track:before{background:var(--spectrum-slider-track-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #fill:before,:host([disabled][variant=filled]) .track:first-child:before{background:var(--spectrum-slider-fill-track-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #buffer:before{background:var(--spectrum-slider-player-track-buffer-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #ramp path{fill:var(--spectrum-slider-ramp-track-color-disabled,var(--spectrum-global-color-gray-200))}:host([disabled][variant=color]) .track{background:var(--spectrum-slider-color-track-color-disabled,var(--spectrum-global-color-gray-200))!important;box-shadow:none}:host([disabled][variant=color]) #handle,:host([disabled][variant=color]) #handle:active,:host([disabled][variant=color]) #handle:hover,:host([disabled][variant=color]) .spectrum-Dial-handle,:host([disabled][variant=color]) .spectrum-Dial-handle:active,:host([disabled][variant=color]) .spectrum-Dial-handle:hover{background:var(--spectrum-slider-color-handle-color-disabled,transparent);box-shadow:none;border-color:var(--spectrum-slider-color-handle-border-color-disabled,var(--spectrum-global-color-gray-400))}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-fill-track-color-disabled,var(--spectrum-global-color-gray-300))}
 `;
 export default styles;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

154073

increased by15.07%

Lines of code

2192

increased by16.84%

Number of lines in readme file

36

increased by260%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedtslib@^1.10.0

• Updated@spectrum-web-components/shared@^0.1.4