Merge pull request #82 from IBM/slider

feat(component): add Slider
2025-09-14 18:01:06 +00:00 · 2019-12-29 12:28:47 -08:00 · 2019-12-29 12:28:47 -08:00 · cd68f8f676
commit cd68f8f676
parent e3c5202658 50fbb60f3c
16 changed files with 253 additions and 11 deletions
--- a/README.md
+++ b/README.md
@ -75,6 +75,8 @@ Currently, the following components are supported:
  - SelectItemGroup
 - SkeletonPlaceholder
 - SkeletonText
+- Slider
+  - SliderSkeleton
 - StructuredList
  - StructuredListSkeleton
  - StructuredListBody
--- a/docs/iframe.html
+++ b/docs/iframe.html
@ -70,4 +70,4 @@
  }</script><style>#root[hidden],
      #docs-root[hidden] {
        display: none !important;
-      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.060526069d5dd6138723.bundle.js"></script><script src="vendors~main.060526069d5dd6138723.bundle.js"></script><script src="main.060526069d5dd6138723.bundle.js"></script></body></html>
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.075acd964d46ea3e765c.bundle.js"></script><script src="vendors~main.075acd964d46ea3e765c.bundle.js"></script><script src="main.075acd964d46ea3e765c.bundle.js"></script></body></html>
--- a/docs/main.060526069d5dd6138723.bundle.js
+++ b/docs/main.060526069d5dd6138723.bundle.js
--- a/docs/main.060526069d5dd6138723.bundle.js.map
+++ b/docs/main.060526069d5dd6138723.bundle.js.map
@ -1 +0,0 @@
-{"version":3,"file":"main.060526069d5dd6138723.bundle.js","sources":["webpack:///main.060526069d5dd6138723.bundle.js"],"mappings":"AAAA","sourceRoot":""}
--- a/docs/main.075acd964d46ea3e765c.bundle.js
+++ b/docs/main.075acd964d46ea3e765c.bundle.js
--- a/docs/main.075acd964d46ea3e765c.bundle.js.map
+++ b/docs/main.075acd964d46ea3e765c.bundle.js.map
@ -0,0 +1 @@
+{"version":3,"file":"main.075acd964d46ea3e765c.bundle.js","sources":["webpack:///main.075acd964d46ea3e765c.bundle.js"],"mappings":"AAAA","sourceRoot":""}
--- a/docs/runtime~main.075acd964d46ea3e765c.bundle.js
+++ b/docs/runtime~main.075acd964d46ea3e765c.bundle.js
@ -1,2 +1,2 @@
 !function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={1:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="";var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]);
-//# sourceMappingURL=runtime~main.060526069d5dd6138723.bundle.js.map
+//# sourceMappingURL=runtime~main.075acd964d46ea3e765c.bundle.js.map
--- a/docs/runtime~main.075acd964d46ea3e765c.bundle.js.map
+++ b/docs/runtime~main.075acd964d46ea3e765c.bundle.js.map
@ -1 +1 @@
-{"version":3,"file":"runtime~main.060526069d5dd6138723.bundle.js","sources":["webpack:///runtime~main.3fc22874a0adf047f1de.bundle.js"],"mappings":"AAAA","sourceRoot":""}
+{"version":3,"file":"runtime~main.075acd964d46ea3e765c.bundle.js","sources":["webpack:///runtime~main.3fc22874a0adf047f1de.bundle.js"],"mappings":"AAAA","sourceRoot":""}
--- a/docs/vendors~main.075acd964d46ea3e765c.bundle.js
+++ b/docs/vendors~main.075acd964d46ea3e765c.bundle.js
--- a/docs/vendors~main.075acd964d46ea3e765c.bundle.js.map
+++ b/docs/vendors~main.075acd964d46ea3e765c.bundle.js.map
@ -1 +1 @@
-{"version":3,"file":"vendors~main.060526069d5dd6138723.bundle.js","sources":["webpack:///vendors~main.060526069d5dd6138723.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;;;AAmmPA;;;;;AAy9WA;;AAu8BA;;;;;;;;;;;;;;AAmBA;;;;;AA68NA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AA6cA;;;;;;;AAfA","sourceRoot":""}
+{"version":3,"file":"vendors~main.075acd964d46ea3e765c.bundle.js","sources":["webpack:///vendors~main.075acd964d46ea3e765c.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;;;AAmmPA;;;;;AAy9WA;;AAu8BA;;;;;;;;;;;;;;AAmBA;;;;;AA68NA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AA8cA;;;;;;;AAfA","sourceRoot":""}
--- a/src/components/Slider/Slider.Skeleton.svelte
+++ b/src/components/Slider/Slider.Skeleton.svelte
@ -0,0 +1,23 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let hideLabel = false;
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+</script>
+
+<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
+  {#if !hideLabel}
+    <span class={cx('--label', '--skeleton')} />
+  {/if}
+  <div class={cx('--slider-container', '--skeleton')}>
+    <span class={cx('--slider__range-label')} />
+    <div class={cx('--slider')}>
+      <div class={cx('--slider__track')} />
+      <div class={cx('--slider__filled-track')} />
+      <div class={cx('--slider__thumb')} />
+    </div>
+    <span class={cx('--slider__range-label')} />
+  </div>
+</div>
--- a/src/components/Slider/Slider.Story.svelte
+++ b/src/components/Slider/Slider.Story.svelte
@ -0,0 +1,23 @@
+<script>
+  export let story = undefined;
+
+  import Layout from '../../internal/ui/Layout.svelte';
+  import Slider from './Slider.svelte';
+  import SliderSkeleton from './Slider.Skeleton.svelte';
+
+  let value = 50;
+</script>
+
+<Layout>
+  {#if story === 'skeleton'}
+    <SliderSkeleton {...$$props} />
+  {:else}
+    <Slider
+      {...$$props}
+      id="slider"
+      bind:value
+      on:change={({ detail }) => {
+        console.log('on:change', detail);
+      }} />
+  {/if}
+</Layout>
--- a/src/components/Slider/Slider.stories.js
+++ b/src/components/Slider/Slider.stories.js
@ -0,0 +1,35 @@
+import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
+import Component from './Slider.Story.svelte';
+
+export default { title: 'Slider', decorators: [withKnobs] };
+
+export const Default = () => ({
+  Component,
+  props: {
+    name: text('Form item name (name)', ''),
+    inputType: text('The form element type (inputType)', 'number'),
+    ariaLabelInput: text(
+      'The ARIA label for the <input> (ariaLabelInput)',
+      'Label for slider value'
+    ),
+    disabled: boolean('Disabled (disabled)', false),
+    light: boolean('Light variant (light)', false),
+    hideTextInput: boolean('Without text input (hideTextInput)', false),
+    min: number('The minimum value (min)', 0),
+    max: number('The maximum value (max)', 100),
+    step: number('The step (step)', 1),
+    stepMuliplier: number('The step factor for Shift+arrow keys (stepMuliplier)', 4),
+    labelText: text('Label text (labelText)', 'Slider Label'),
+    minLabel: text('Label for minimum value (minLabel)', ''),
+    maxLabel: text('Label for maximum value (maxLabel)', ''),
+    hideLabel: boolean('Hide label (hideLabel)', false)
+  }
+});
+
+export const Skeleton = () => ({
+  Component,
+  props: {
+    story: 'skeleton',
+    hideLabel: boolean('Hide label (hideLabel)', false)
+  }
+});
--- a/src/components/Slider/Slider.svelte
+++ b/src/components/Slider/Slider.svelte
@ -0,0 +1,152 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let hideTextInput = false;
+  export let id = Math.random();
+  export let value = '';
+  export let min = 0;
+  export let max = 100;
+  export let minLabel = '';
+  export let maxLabel = '';
+  export let labelText = '';
+  export let formatLabel = (value, label) => {
+    return typeof label === 'function' ? label(value) : `${value}${label}`;
+  };
+  export let step = 1;
+  export let stepMultiplier = 4;
+  export let disabled = false;
+  export let name = '';
+  export let inputType = 'number';
+  export let invalid = false;
+  export let required = false;
+  export let light = false;
+  export let style = undefined;
+
+  import { createEventDispatcher, afterUpdate, tick } from 'svelte';
+  import { cx } from '../../lib';
+
+  const dispatch = createEventDispatcher();
+
+  let dragging = false;
+  let holding = false;
+  let elementRef = undefined;
+  let trackRef = undefined;
+
+  function startDragging() {
+    dragging = true;
+  }
+
+  function startHolding() {
+    holding = true;
+  }
+
+  function stopHolding() {
+    holding = false;
+  }
+
+  function calcValue(event) {
+    const offsetX = event.touches ? event.touches[0].clientX : event.clientX;
+    const { left, width } = trackRef.getBoundingClientRect();
+    let nextValue = min + Math.round(((max - min) * ((offsetX - left) / width)) / step) * step;
+
+    if (nextValue <= min) {
+      nextValue = min;
+    } else if (nextValue >= max) {
+      nextValue = max;
+    }
+
+    value = nextValue;
+  }
+
+  afterUpdate(() => {
+    if (!holding) {
+      dispatch('change', value);
+    }
+  });
+
+  $: range = max - min;
+  $: left = ((value - min) / range) * 100;
+  $: {
+    if (value <= min) {
+      value = min;
+    } else if (value >= max) {
+      value = max;
+    }
+
+    if (dragging) {
+      calcValue(event);
+      dragging = false;
+    }
+  }
+</script>
+
+<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
+  <label for={id} class={cx('--label', disabled && '--label--disabled')}>{labelText}</label>
+  <div class={cx('--slider-container')}>
+    <span class={cx('--slider__range-label')}>{formatLabel(min, minLabel)}</span>
+    <div
+      bind:this={elementRef}
+      role="presentation"
+      tabindex="-1"
+      class={cx('--slider', disabled && '--slider--disabled')}
+      on:click={startDragging}
+      on:mousemove={() => {
+        if (holding) {
+          startDragging();
+        }
+      }}
+      on:touchmove={() => {
+        if (holding) {
+          startDragging();
+        }
+      }}
+      on:mouseup={stopHolding}
+      on:touchup={stopHolding}
+      on:touchend={stopHolding}
+      on:touchcancel={stopHolding}>
+      <div
+        role="slider"
+        tabindex="0"
+        class={cx('--slider__thumb')}
+        style={`left: ${left}%`}
+        aria-valuemax={max}
+        aria-valuemin={min}
+        aria-valuenow={value}
+        on:mousedown={startHolding}
+        on:touchstart={startHolding}
+        on:keydown={({ shiftKey, key }) => {
+          const keys = { ArrowDown: -1, ArrowLeft: -1, ArrowRight: 1, ArrowUp: 1 };
+          if (keys[key]) {
+            value += step * (shiftKey ? range / step / stepMultiplier : 1) * keys[key];
+          }
+        }}
+        {id} />
+      <div bind:this={trackRef} class={cx('--slider__track')} />
+      <div
+        class={cx('--slider__filled-track')}
+        style={`transform: translate(0, -50%) scaleX(${left / 100})`} />
+      <input
+        type="hidden"
+        class={cx('--slider__input')}
+        {name}
+        {value}
+        {required}
+        {min}
+        {max}
+        {step} />
+    </div>
+    <span class={cx('--slider__range-label')}>{formatLabel(max, maxLabel)}</span>
+    {#if !hideTextInput}
+      <input
+        type={inputType}
+        id={`input-${id}`}
+        aria-label={$$props['aria-label'] || 'Slider number input'}
+        class={cx('--text-input', '--slider-text-input', light && '--text-input--light', invalid && '--text-input--invalid')}
+        on:change={({ target }) => {
+          value = Number(target.value);
+        }}
+        {disabled}
+        {value} />
+    {/if}
+  </div>
+</div>
--- a/src/components/Slider/index.js
+++ b/src/components/Slider/index.js
@ -0,0 +1,4 @@
+import Slider from './Slider.svelte';
+
+export default Slider;
+export { default as SliderSkeleton } from './Slider.Skeleton.svelte';
--- a/src/index.js
+++ b/src/index.js
@ -46,6 +46,7 @@ import Search, { SearchSkeleton } from './components/Search';
 import Select, { SelectSkeleton, SelectItem, SelectItemGroup } from './components/Select';
 import SkeletonPlaceholder from './components/SkeletonPlaceholder';
 import SkeletonText from './components/SkeletonText';
+import Slider, { SliderSkeleton } from './components/Slider';
 import {
  StructuredListSkeleton,
  StructuredListBody,
@ -143,6 +144,8 @@ export {
  SkeletonPlaceholder,
  SkeletonText,
  Switch,
+  Slider,
+  SliderSkeleton,
  StructuredListSkeleton,
  StructuredListBody,
  StructuredListHead,
				`@ -1 +0,0 @@`
				`{"version":3,"file":"main.060526069d5dd6138723.bundle.js","sources":["webpack:///main.060526069d5dd6138723.bundle.js"],"mappings":"AAAA","sourceRoot":""}`
				`@ -0,0 +1 @@`
				`{"version":3,"file":"main.075acd964d46ea3e765c.bundle.js","sources":["webpack:///main.075acd964d46ea3e765c.bundle.js"],"mappings":"AAAA","sourceRoot":""}`