Socket
Socket
Sign inDemoInstall

@spectrum-web-components/slider

Package Overview
Dependencies
Maintainers
5
Versions
235
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 0.4.8 to 0.4.9

src/spectrum-vars.json

4

CHANGELOG.md

@@ -6,2 +6,6 @@ # Change Log

## [0.4.9](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/slider@0.4.8...@spectrum-web-components/slider@0.4.9) (2020-06-08)
**Note:** Version bump only for package @spectrum-web-components/slider
## [0.4.8](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/slider@0.4.7...@spectrum-web-components/slider@0.4.8) (2020-04-16)

@@ -8,0 +12,0 @@

172

custom-elements.json

@@ -1,171 +0,1 @@

{
"version": "experimental",
"tags": [
{
"name": "sp-slider",
"path": "./src/index.ts",
"attributes": [
{
"name": "type",
"type": "string",
"default": "\"\""
},
{
"name": "value",
"type": "number"
},
{
"name": "variant",
"type": "string"
},
{
"name": "label",
"type": "string",
"default": "\"\""
},
{
"name": "aria-label",
"type": "string | undefined"
},
{
"name": "max",
"type": "number",
"default": "20"
},
{
"name": "min",
"type": "number",
"default": "0"
},
{
"name": "step",
"type": "number",
"default": "1"
},
{
"name": "tick-step",
"type": "number",
"default": "0"
},
{
"name": "tick-labels",
"type": "boolean",
"default": "false"
},
{
"name": "dragging",
"type": "boolean",
"default": "false"
},
{
"name": "handle-highlight",
"type": "boolean",
"default": "false"
},
{
"name": "disabled",
"description": "Disable this control. It will not receive focus or events",
"type": "boolean",
"default": "false"
}
],
"properties": [
{
"name": "type",
"attribute": "type",
"type": "string",
"default": "\"\""
},
{
"name": "value",
"attribute": "value",
"type": "number"
},
{
"name": "variant",
"attribute": "variant",
"type": "string"
},
{
"name": "getAriaValueText",
"type": "(value: number) => string",
"default": "\"(value) => `${value}`\""
},
{
"name": "label",
"attribute": "label",
"type": "string",
"default": "\"\""
},
{
"name": "ariaLabel",
"attribute": "aria-label",
"type": "string | undefined"
},
{
"name": "max",
"attribute": "max",
"type": "number",
"default": "20"
},
{
"name": "min",
"attribute": "min",
"type": "number",
"default": "0"
},
{
"name": "step",
"attribute": "step",
"type": "number",
"default": "1"
},
{
"name": "tickStep",
"attribute": "tick-step",
"type": "number",
"default": "0"
},
{
"name": "tickLabels",
"attribute": "tick-labels",
"type": "boolean",
"default": "false"
},
{
"name": "dragging",
"attribute": "dragging",
"type": "boolean",
"default": "false"
},
{
"name": "handleHighlight",
"attribute": "handle-highlight",
"type": "boolean",
"default": "false"
},
{
"name": "disabled",
"attribute": "disabled",
"description": "Disable this control. It will not receive focus or events",
"type": "boolean",
"default": "false"
},
{
"name": "autofocus",
"description": "When this control is rendered, focus it automatically",
"type": "boolean"
},
{
"name": "tabIndex",
"description": "The tab index to apply to this control. See general documentation about\nthe tabindex HTML property",
"type": "number"
},
{
"name": "focusElement",
"type": "HTMLElement"
}
]
}
]
}
{"version":"experimental","tags":[{"name":"sp-slider","path":"./src/index.ts","attributes":[{"name":"type","type":"string","default":"\"\""},{"name":"value","type":"number"},{"name":"variant","type":"string"},{"name":"label","type":"string","default":"\"\""},{"name":"aria-label","type":"string | undefined"},{"name":"max","type":"number","default":"20"},{"name":"min","type":"number","default":"0"},{"name":"step","type":"number","default":"1"},{"name":"tick-step","type":"number","default":"0"},{"name":"tick-labels","type":"boolean","default":"false"},{"name":"dragging","type":"boolean","default":"false"},{"name":"handle-highlight","type":"boolean","default":"false"},{"name":"disabled","description":"Disable this control. It will not receive focus or events","type":"boolean","default":"false"}],"properties":[{"name":"type","attribute":"type","type":"string","default":"\"\""},{"name":"value","attribute":"value","type":"number"},{"name":"variant","attribute":"variant","type":"string"},{"name":"getAriaValueText","type":"(value: number) => string","default":"\"(value) => `${value}`\""},{"name":"label","attribute":"label","type":"string","default":"\"\""},{"name":"ariaLabel","attribute":"aria-label","type":"string | undefined"},{"name":"max","attribute":"max","type":"number","default":"20"},{"name":"min","attribute":"min","type":"number","default":"0"},{"name":"step","attribute":"step","type":"number","default":"1"},{"name":"tickStep","attribute":"tick-step","type":"number","default":"0"},{"name":"tickLabels","attribute":"tick-labels","type":"boolean","default":"false"},{"name":"dragging","attribute":"dragging","type":"boolean","default":"false"},{"name":"handleHighlight","attribute":"handle-highlight","type":"boolean","default":"false"},{"name":"disabled","attribute":"disabled","description":"Disable this control. It will not receive focus or events","type":"boolean","default":"false"},{"name":"autofocus","description":"When this control is rendered, focus it automatically","type":"boolean"},{"name":"tabIndex","description":"The tab index to apply to this control. See general documentation about\nthe tabindex HTML property","type":"number"},{"name":"focusElement","type":"HTMLElement"}],"cssProperties":[{"name":"--spectrum-slider-height","default":"var(--spectrum-alias-single-line-height)","type":""},{"name":"--spectrum-slider-min-width","default":"var(--spectrum-global-dimension-size-1250)","type":""},{"name":"--spectrum-slider-handle-width","default":"var(--spectrum-global-dimension-size-200)","type":""},{"name":"--spectrum-slider-track-height","default":"var(--spectrum-alias-border-size-thick)","type":""},{"name":"--spectrum-slider-fill-track-height","default":"var(--spectrum-alias-border-size-thick)","type":""},{"name":"--spectrum-slider-handle-gap","default":"var(--spectrum-alias-border-size-thicker)","type":""},{"name":"--spectrum-slider-track-border-radius","default":"var(--spectrum-global-dimension-static-size-10)","type":""},{"name":"--spectrum-slider-ramp-track-height","default":"var(--spectrum-global-dimension-static-size-200)","type":""},{"name":"--spectrum-slider-handle-height","default":"var(--spectrum-global-dimension-size-200)","type":""},{"name":"--spectrum-slider-handle-border-size","default":"var(--spectrum-alias-border-size-thick)","type":""},{"name":"--spectrum-slider-handle-border-radius","default":"var(--spectrum-alias-border-radius-medium)","type":""},{"name":"--spectrum-slider-animation-duration","default":"var(--spectrum-global-animation-duration-100)","type":""},{"name":"--spectrum-alias-focus-ring-gap","default":"var(--spectrum-global-dimension-static-size-25)","type":""},{"name":"--spectrum-fieldlabel-padding-top","default":"var(--spectrum-global-dimension-size-50)","type":""},{"name":"--spectrum-label-text-size","default":"var(--spectrum-global-dimension-font-size-75)","type":""},{"name":"--spectrum-label-text-line-height","default":"var(--spectrum-global-font-line-height-small)","type":""},{"name":"--spectrum-slider-label-gap-x","default":"var(--spectrum-global-dimension-size-200)","type":""},{"name":"--spectrum-slider-tick-mark-height","default":"10px","type":""},{"name":"--spectrum-slider-tick-mark-width","default":"var(--spectrum-alias-border-size-thick)","type":""},{"name":"--spectrum-slider-tick-mark-border-radius","default":"var(--spectrum-alias-border-radius-xsmall)","type":""},{"name":"--spectrum-fieldlabel-padding-bottom","default":"var(--spectrum-global-dimension-size-65)","type":""},{"name":"--spectrum-slider-color-track-height","default":"var(--spectrum-global-dimension-static-size-300)","type":""},{"name":"--spectrum-alias-border-radius-regular","default":"var(--spectrum-global-dimension-size-50)","type":""},{"name":"--spectrum-dial-container-width","default":"var(--spectrum-global-dimension-static-size-600)","type":""},{"name":"--spectrum-dial-border-radius","default":"var(--spectrum-alias-border-radius-large)","type":""},{"name":"--spectrum-dial-min-max-tick-angles","default":"45deg","type":""},{"name":"--spectrum-dial-handle-marker-width","default":"12px","type":""},{"name":"--spectrum-dial-handle-marker-height","default":"var(--spectrum-alias-border-size-thick)","type":""},{"name":"--spectrum-dial-handle-marker-border-radius","default":"var(--spectrum-alias-border-radius-xsmall)","type":""},{"name":"--spectrum-dial-small-width","default":"var(--spectrum-global-dimension-static-size-300)","type":""},{"name":"--spectrum-dial-small-height","default":"var(--spectrum-global-dimension-static-size-300)","type":""},{"name":"--spectrum-slider-color-handle-outset-border-size","default":"var(--spectrum-alias-border-size-thin)","type":""},{"name":"--spectrum-slider-track-color","default":"var(--spectrum-global-color-gray-300)","type":""},{"name":"--spectrum-label-text-color","default":"var(--spectrum-alias-label-text-color)","type":""},{"name":"--spectrum-slider-fill-track-color","default":"var(--spectrum-global-color-gray-700)","type":""},{"name":"--spectrum-slider-player-track-buffer-color","default":"var(--spectrum-global-color-gray-500)","type":""},{"name":"--spectrum-slider-handle-border-color","default":"var(--spectrum-global-color-gray-700)","type":""},{"name":"--spectrum-slider-handle-background-color","default":"var(--spectrum-alias-background-color-transparent)","type":""},{"name":"--spectrum-slider-handle-border-color-hover","default":"var(--spectrum-global-color-gray-800)","type":""},{"name":"--spectrum-alias-focus-ring-size","default":"var(--spectrum-global-dimension-static-size-25)","type":""},{"name":"--spectrum-alias-focus-color","default":"var(--spectrum-global-color-blue-400)","type":""},{"name":"--spectrum-slider-handle-border-color-down","default":"var(--spectrum-global-color-gray-800)","type":""},{"name":"--spectrum-alias-background-color-default","default":"var(--spectrum-global-color-gray-100)","type":""},{"name":"--spectrum-slider-tick-mark-color","default":"var(--spectrum-alias-track-color-default)","type":""},{"name":"--spectrum-slider-handle-background-color-down","default":"var(--spectrum-alias-background-color-transparent)","type":""},{"name":"--spectrum-slider-color-track-background-color-gradient-start","default":"var(--spectrum-global-color-blue-400)","type":""},{"name":"--spectrum-slider-color-track-background-color-gradient-end","default":"var(--spectrum-global-color-blue-700)","type":""},{"name":"--spectrum-slider-color-track-border-color","default":"var(--spectrum-alias-border-color-translucent-dark)","type":""},{"name":"--spectrum-slider-color-handle-inset-border-color","default":"var(--spectrum-alias-border-color-translucent-dark)","type":""},{"name":"--spectrum-slider-color-handle-outset-border-color","default":"var(--spectrum-alias-border-color-translucent-dark)","type":""},{"name":"--spectrum-slider-color-handle-border-color","default":"var(--spectrum-global-color-gray-50)","type":""},{"name":"--spectrum-slider-color-handle-color","default":"var(--spectrum-alias-border-color-transparent)","type":""},{"name":"--spectrum-slider-color-handle-outset-border-color-key-focus","default":"var(--spectrum-alias-border-color-translucent-dark)","type":""},{"name":"--spectrum-dial-handle-marker-color","default":"var(--spectrum-global-color-gray-700)","type":""},{"name":"--spectrum-dial-handle-marker-color-hover","default":"var(--spectrum-global-color-gray-800)","type":""},{"name":"--spectrum-slider-handle-background-color-key-focus","default":"var(--spectrum-alias-border-color-focus)","type":""},{"name":"--spectrum-dial-handle-marker-color-key-focus","default":"var(--spectrum-global-color-gray-50)","type":""},{"name":"--spectrum-dial-border-color-hover","default":"var(--spectrum-global-color-gray-800)","type":""},{"name":"--spectrum-dial-min-max-tick-color","default":"var(--spectrum-global-color-gray-600)","type":""},{"name":"--spectrum-label-text-color-disabled","default":"var(--spectrum-alias-text-color-disabled)","type":""},{"name":"--spectrum-slider-handle-border-color-disabled","default":"var(--spectrum-global-color-gray-400)","type":""},{"name":"--spectrum-slider-track-color-disabled","default":"var(--spectrum-global-color-gray-300)","type":""},{"name":"--spectrum-slider-fill-track-color-disabled","default":"var(--spectrum-global-color-gray-300)","type":""},{"name":"--spectrum-slider-player-track-buffer-color-disabled","default":"var(--spectrum-alias-track-color-default)","type":""},{"name":"--spectrum-slider-ramp-track-color-disabled","default":"var(--spectrum-global-color-gray-200)","type":""},{"name":"--spectrum-slider-color-track-color-disabled","default":"var(--spectrum-global-color-gray-200)","type":""},{"name":"--spectrum-slider-color-handle-color-disabled","default":"var(--spectrum-alias-border-color-transparent)","type":""},{"name":"--spectrum-slider-color-handle-border-color-disabled","default":"var(--spectrum-global-color-gray-400)","type":""}]}]}

626

lib/slider.js

@@ -18,96 +18,97 @@ /*

export const variants = ['color', 'filled', 'ramp', 'range', 'tick'];
export class Slider extends Focusable {
constructor() {
super(...arguments);
this.type = '';
this._value = 10;
/* Ensure that a '' value for `variant` removes the attribute instead of a blank value */
this._variant = '';
this.getAriaValueText = (value) => `${value}`;
this.label = '';
this.max = 20;
this.min = 0;
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 = (event) => {
// Retain focus on input element after mouse up to enable keyboard interactions
this.focus();
this.currentMouseEvent = event;
document.removeEventListener('mousemove', this.onMouseMove);
document.removeEventListener('mouseup', this.onMouseUp);
requestAnimationFrame(() => {
this.handleHighlight = false;
this.dragging = false;
this.dispatchChangeEvent();
});
};
this.onMouseMove = (event) => {
this.currentMouseEvent = event;
};
}
static get styles() {
return [...super.styles, sliderStyles, spectrumSliderStyles];
}
get value() {
return this._value;
}
set value(value) {
const oldValue = this.value;
if (this.input) {
this.input.value = String(value);
let Slider = /** @class */ (() => {
class Slider extends Focusable {
constructor() {
super(...arguments);
this.type = '';
this._value = 10;
/* Ensure that a '' value for `variant` removes the attribute instead of a blank value */
this._variant = '';
this.getAriaValueText = (value) => `${value}`;
this.label = '';
this.max = 20;
this.min = 0;
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 = (event) => {
// Retain focus on input element after mouse up to enable keyboard interactions
this.focus();
this.currentMouseEvent = event;
document.removeEventListener('mousemove', this.onMouseMove);
document.removeEventListener('mouseup', this.onMouseUp);
requestAnimationFrame(() => {
this.handleHighlight = false;
this.dragging = false;
this.dispatchChangeEvent();
});
};
this.onMouseMove = (event) => {
this.currentMouseEvent = event;
};
}
const newValue = this.input ? parseFloat(this.input.value) : value;
if (newValue === oldValue) {
return;
static get styles() {
return [...super.styles, sliderStyles, spectrumSliderStyles];
}
this._value = newValue;
this.requestUpdate('value', oldValue);
}
set variant(variant) {
const oldVariant = this.variant;
if (variant === this.variant) {
return;
get value() {
return this._value;
}
if (variants.includes(variant)) {
this.setAttribute('variant', variant);
this._variant = variant;
set value(value) {
const oldValue = this.value;
if (this.input) {
this.input.value = String(value);
}
const newValue = this.input ? parseFloat(this.input.value) : value;
if (newValue === oldValue) {
return;
}
this._value = newValue;
this.requestUpdate('value', oldValue);
}
else {
this.removeAttribute('variant');
this._variant = '';
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);
}
this.requestUpdate('variant', oldVariant);
}
get variant() {
return this._variant;
}
get ariaValueText() {
if (!this.getAriaValueText) {
return `${this.value}`;
get variant() {
return this._variant;
}
return this.getAriaValueText(this.value);
}
get focusElement() {
return this.input ? this.input : this;
}
render() {
return html `
get ariaValueText() {
if (!this.getAriaValueText) {
return `${this.value}`;
}
return this.getAriaValueText(this.value);
}
get focusElement() {
return this.input ? this.input : this;
}
render() {
return html `
${this.renderLabel()}
${this.variant === 'color'
? this.renderColorTrack()
: this.renderTrack()}
? this.renderColorTrack()
: this.renderTrack()}
`;
}
updated(changedProperties) {
if (changedProperties.has('value')) {
this.dispatchInputEvent();
}
}
renderLabel() {
return html `
updated(changedProperties) {
if (changedProperties.has('value')) {
this.dispatchInputEvent();
}
}
renderLabel() {
return html `
<div id="labelContainer">

@@ -125,8 +126,8 @@ <label id="label" for="input">${this.label}</label>

`;
}
renderTrackLeft() {
if (this.variant === 'ramp') {
return html ``;
}
return html `
renderTrackLeft() {
if (this.variant === 'ramp') {
return html ``;
}
return html `
<div

@@ -139,8 +140,8 @@ class="track"

`;
}
renderTrackRight() {
if (this.variant === 'ramp') {
return html ``;
}
return html `
renderTrackRight() {
if (this.variant === 'ramp') {
return html ``;
}
return html `
<div

@@ -153,8 +154,8 @@ class="track"

`;
}
renderRamp() {
if (this.variant !== 'ramp') {
return html ``;
}
return html `
renderRamp() {
if (this.variant !== 'ramp') {
return html ``;
}
return html `
<div id="ramp">

@@ -173,12 +174,12 @@ <svg

`;
}
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 `
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">

@@ -188,3 +189,3 @@ ${ticks.map((tick, i) => html `

${this.tickLabels
? html `
? html `
<div class="tickLabel">

@@ -194,3 +195,3 @@ ${i * tickStep}

`
: html ``}
: html ``}
</div>

@@ -200,5 +201,5 @@ `)}

`;
}
renderHandle() {
return html `
}
renderHandle() {
return html `
<div

@@ -233,5 +234,5 @@ id="handle"

`;
}
renderTrack() {
return html `
}
renderTrack() {
return html `
<div id="controls"

@@ -249,5 +250,5 @@ @pointerdown=${this.onTrackPointerDown}

`;
}
renderColorTrack() {
return html `
}
renderColorTrack() {
return html `
<div id="controls" @pointerdown=${this.onTrackPointerDown}>

@@ -258,207 +259,210 @@ <div class="track"></div>

`;
}
onPointerDown(event) {
if (this.disabled) {
return;
}
this.boundingClientRect = this.getBoundingClientRect();
this.focus();
this.dragging = true;
this.handle.setPointerCapture(event.pointerId);
}
onMouseDown(event) {
if (this.supportsPointerEvent) {
return;
onPointerDown(event) {
if (this.disabled) {
return;
}
this.boundingClientRect = this.getBoundingClientRect();
this.focus();
this.dragging = true;
this.handle.setPointerCapture(event.pointerId);
}
if (this.disabled) {
return;
onMouseDown(event) {
if (this.supportsPointerEvent) {
return;
}
if (this.disabled) {
return;
}
this.boundingClientRect = this.getBoundingClientRect();
document.addEventListener('mousemove', this.onMouseMove);
document.addEventListener('mouseup', this.onMouseUp);
this.focus();
this.dragging = true;
this.currentMouseEvent = event;
this._trackMouseEvent();
}
this.boundingClientRect = this.getBoundingClientRect();
document.addEventListener('mousemove', this.onMouseMove);
document.addEventListener('mouseup', this.onMouseUp);
this.focus();
this.dragging = true;
this.currentMouseEvent = event;
this._trackMouseEvent();
}
_trackMouseEvent() {
if (!this.currentMouseEvent || !this.dragging) {
return;
_trackMouseEvent() {
if (!this.currentMouseEvent || !this.dragging) {
return;
}
this.value = this.calculateHandlePosition(this.currentMouseEvent);
requestAnimationFrame(() => this._trackMouseEvent());
}
this.value = this.calculateHandlePosition(this.currentMouseEvent);
requestAnimationFrame(() => this._trackMouseEvent());
}
onPointerUp(event) {
// Retain focus on input element after mouse up to enable keyboard interactions
this.focus();
this.handleHighlight = false;
this.dragging = false;
this.handle.releasePointerCapture(event.pointerId);
this.dispatchChangeEvent();
}
onPointerMove(event) {
if (!this.dragging) {
return;
onPointerUp(event) {
// Retain focus on input element after mouse up to enable keyboard interactions
this.focus();
this.handleHighlight = false;
this.dragging = false;
this.handle.releasePointerCapture(event.pointerId);
this.dispatchChangeEvent();
}
this.value = this.calculateHandlePosition(event);
}
onPointerCancel(event) {
this.dragging = false;
this.handle.releasePointerCapture(event.pointerId);
}
/**
* Move the handle under the cursor and begin start a pointer capture when the track
* is moused down
*/
onTrackPointerDown(event) {
if (event.target === this.handle || this.disabled) {
return;
onPointerMove(event) {
if (!this.dragging) {
return;
}
this.value = this.calculateHandlePosition(event);
}
this.boundingClientRect = this.getBoundingClientRect();
this.dragging = true;
this.handle.setPointerCapture(event.pointerId);
onPointerCancel(event) {
this.dragging = false;
this.handle.releasePointerCapture(event.pointerId);
}
/**
* Dispatch a synthetic pointerdown event to ensure that pointerdown
* handlers attached to the slider are invoked before input handlers
* Move the handle under the cursor and begin start a pointer capture when the track
* is moused down
*/
event.stopPropagation();
const syntheticPointerEvent = new PointerEvent('pointerdown', event);
this.dispatchEvent(syntheticPointerEvent);
this.value = this.calculateHandlePosition(event);
}
onTrackMouseDown(event) {
if (this.supportsPointerEvent) {
return;
onTrackPointerDown(event) {
if (event.target === this.handle || this.disabled) {
return;
}
this.boundingClientRect = this.getBoundingClientRect();
this.dragging = true;
this.handle.setPointerCapture(event.pointerId);
/**
* Dispatch a synthetic pointerdown event to ensure that pointerdown
* handlers attached to the slider are invoked before input handlers
*/
event.stopPropagation();
const syntheticPointerEvent = new PointerEvent('pointerdown', event);
this.dispatchEvent(syntheticPointerEvent);
this.value = this.calculateHandlePosition(event);
}
if (event.target === this.handle || this.disabled) {
return;
onTrackMouseDown(event) {
if (this.supportsPointerEvent) {
return;
}
if (event.target === this.handle || this.disabled) {
return;
}
document.addEventListener('mousemove', this.onMouseMove);
document.addEventListener('mouseup', this.onMouseUp);
this.boundingClientRect = this.getBoundingClientRect();
this.dragging = true;
this.currentMouseEvent = event;
this._trackMouseEvent();
}
document.addEventListener('mousemove', this.onMouseMove);
document.addEventListener('mouseup', this.onMouseUp);
this.boundingClientRect = this.getBoundingClientRect();
this.dragging = true;
this.currentMouseEvent = event;
this._trackMouseEvent();
}
/**
* Keep the slider value property in sync with the input element's value
*/
onInputChange() {
const inputValue = parseFloat(this.input.value);
this.value = inputValue;
this.dispatchChangeEvent();
}
onInputFocus() {
this.handleHighlight = true;
}
onInputBlur() {
this.handleHighlight = false;
}
/**
* Returns the value under the cursor
* @param: PointerEvent on slider
* @return: Slider value that correlates to the position under the pointer
*/
calculateHandlePosition(event) {
if (!this.boundingClientRect) {
return this.value;
/**
* Keep the slider value property in sync with the input element's value
*/
onInputChange() {
const inputValue = parseFloat(this.input.value);
this.value = inputValue;
this.dispatchChangeEvent();
}
const rect = this.boundingClientRect;
const minOffset = rect.left;
const offset = event.clientX;
const size = rect.width;
const percent = (offset - minOffset) / size;
const value = this.min + (this.max - this.min) * percent;
return value;
}
dispatchInputEvent() {
if (!this.dragging) {
return;
onInputFocus() {
this.handleHighlight = true;
}
const inputEvent = new Event('input', {
bubbles: true,
composed: true,
});
this.dispatchEvent(inputEvent);
onInputBlur() {
this.handleHighlight = false;
}
/**
* Returns the value under the cursor
* @param: PointerEvent on slider
* @return: Slider value that correlates to the position under the pointer
*/
calculateHandlePosition(event) {
if (!this.boundingClientRect) {
return this.value;
}
const rect = this.boundingClientRect;
const minOffset = rect.left;
const offset = event.clientX;
const size = rect.width;
const percent = (offset - minOffset) / size;
const value = this.min + (this.max - this.min) * percent;
return value;
}
dispatchInputEvent() {
if (!this.dragging) {
return;
}
const inputEvent = new Event('input', {
bubbles: true,
composed: true,
});
this.dispatchEvent(inputEvent);
}
dispatchChangeEvent() {
this.input.value = this.value.toString();
const changeEvent = new Event('change', {
bubbles: true,
composed: true,
});
this.dispatchEvent(changeEvent);
}
/**
* Ratio representing the slider's position on the track
*/
get trackProgress() {
const range = this.max - this.min;
const progress = this.value - this.min;
return progress / range;
}
get trackLeftStyle() {
return `width: ${this.trackProgress * 100}%`;
}
get trackRightStyle() {
const width = `width: ${(1 - this.trackProgress) * 100}%;`;
const halfHandleWidth = `var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2`;
const offset = `left: calc(${this.trackProgress * 100}% + ${halfHandleWidth})`;
return width + offset;
}
get handleStyle() {
return `left: ${this.trackProgress * 100}%`;
}
}
dispatchChangeEvent() {
this.input.value = this.value.toString();
const changeEvent = new Event('change', {
bubbles: true,
composed: true,
});
this.dispatchEvent(changeEvent);
}
/**
* Ratio representing the slider's position on the track
*/
get trackProgress() {
const range = this.max - this.min;
const progress = this.value - this.min;
return progress / range;
}
get trackLeftStyle() {
return `width: ${this.trackProgress * 100}%`;
}
get trackRightStyle() {
const width = `width: ${(1 - this.trackProgress) * 100}%;`;
const halfHandleWidth = `var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2`;
const offset = `left: calc(${this.trackProgress * 100}% + ${halfHandleWidth})`;
return width + offset;
}
get handleStyle() {
return `left: ${this.trackProgress * 100}%`;
}
}
__decorate([
property()
], Slider.prototype, "type", void 0);
__decorate([
property({ reflect: true })
], Slider.prototype, "value", null);
__decorate([
property({ type: String })
], Slider.prototype, "variant", null);
__decorate([
property({ attribute: false })
], Slider.prototype, "getAriaValueText", void 0);
__decorate([
property({ attribute: false })
], Slider.prototype, "ariaValueText", null);
__decorate([
property()
], Slider.prototype, "label", void 0);
__decorate([
property({ reflect: true, attribute: 'aria-label' })
], Slider.prototype, "ariaLabel", void 0);
__decorate([
property({ type: Number })
], Slider.prototype, "max", void 0);
__decorate([
property({ type: Number })
], Slider.prototype, "min", void 0);
__decorate([
property({ type: Number })
], Slider.prototype, "step", void 0);
__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 })
], Slider.prototype, "disabled", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], Slider.prototype, "dragging", void 0);
__decorate([
property({ type: Boolean, reflect: true, attribute: 'handle-highlight' })
], Slider.prototype, "handleHighlight", void 0);
__decorate([
query('#handle')
], Slider.prototype, "handle", void 0);
__decorate([
query('#input')
], Slider.prototype, "input", void 0);
__decorate([
property()
], Slider.prototype, "type", void 0);
__decorate([
property({ reflect: true })
], Slider.prototype, "value", null);
__decorate([
property({ type: String })
], Slider.prototype, "variant", null);
__decorate([
property({ attribute: false })
], Slider.prototype, "getAriaValueText", void 0);
__decorate([
property({ attribute: false })
], Slider.prototype, "ariaValueText", null);
__decorate([
property()
], Slider.prototype, "label", void 0);
__decorate([
property({ reflect: true, attribute: 'aria-label' })
], Slider.prototype, "ariaLabel", void 0);
__decorate([
property({ type: Number })
], Slider.prototype, "max", void 0);
__decorate([
property({ type: Number })
], Slider.prototype, "min", void 0);
__decorate([
property({ type: Number })
], Slider.prototype, "step", void 0);
__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 })
], Slider.prototype, "disabled", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], Slider.prototype, "dragging", void 0);
__decorate([
property({ type: Boolean, reflect: true, attribute: 'handle-highlight' })
], Slider.prototype, "handleHighlight", void 0);
__decorate([
query('#handle')
], Slider.prototype, "handle", void 0);
__decorate([
query('#input')
], Slider.prototype, "input", void 0);
return Slider;
})();
export { Slider };
//# sourceMappingURL=slider.js.map

8

package.json

@@ -21,3 +21,3 @@ {

],
"version": "0.4.8",
"version": "0.4.9",
"description": "",

@@ -49,6 +49,6 @@ "main": "lib/index.js",

"dependencies": {
"@spectrum-web-components/shared": "^0.4.6",
"tslib": "^1.10.0"
"@spectrum-web-components/shared": "^0.4.7",
"tslib": "^2.0.0"
},
"gitHead": "c8a769e3b24974f722054bc121f9a896d66e0bf1"
"gitHead": "16b57d15356859cee73278cdf796274e3245320b"
}

50

README.md

@@ -18,32 +18,64 @@ ## Description

### Example
### Variants
#### Standard
```html
<sp-slider></sp-slider>
<sp-slider disabled></sp-slider>
```
### Variants
#### With Label
```html
<sp-slider label="Slider Label"></sp-slider>
<sp-slider label="Slider Label - Disabled" disabled></sp-slider>
```
#### Filled
```html
<sp-slider variant="filled"></sp-slider>
<sp-slider label="Slider Label" variant="filled"></sp-slider>
<sp-slider
label="Slider Label - Disabled"
variant="filled"
disabled
></sp-slider>
```
#### Ramp
#### Tick
```html
<sp-slider variant="ramp"></sp-slider>
<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
#### Tick with Labels
```html
<sp-slider variant="tick" tick-step="4"></sp-slider>
<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>
```
#### Tick w/ labels
#### Ramp
```html
<sp-slider variant="tick" tick-step="5" tick-labels></sp-slider>
<sp-slider label="Slider Label" variant="ramp"></sp-slider>
<sp-slider label="Slider Label - Disabled" variant="ramp" disabled></sp-slider>
```
lib/slider.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc