@geoffcox/sterling-svelte 0.0.8 → 0.0.10

package/inputs/Slider.svelte

@@ -1,5 +1,7 @@
-<script>import { round } from "lodash-es";
-import { createEventDispatcher } from "svelte";
+<script>import { createEventDispatcher } from "svelte";
+import { round } from "lodash-es";
+import { v4 as uuid } from "uuid";
+import Label from "../display/Label.svelte";
 export let value = 0;
 export let min = 0;
 export let max = 100;
@@ -7,6 +9,7 @@ export let step = void 0;
 export let precision = 0;
 export let vertical = false;
 export let disabled = false;
+const inputId = uuid();
 let sliderRef;
 const dispatch = createEventDispatcher();
 const raiseChange = (newValue) => {
@@ -121,240 +124,210 @@ const onKeyDown = (event) => {
 <!-- @component
 Slider lets the user chose a value within a min/max range by dragging a thumb button.
 -->
-{#if $$slots.label}
-	<label class="sterling-slider-label" class:vertical>
-		<div class="label-content" class:disabled>
-			<slot name="label" />
-		</div>
-		<div
-			class="sterling-slider labeled"
-			class:disabled
-			class:horizontal={!vertical}
-			class:vertical
-			role="slider"
-			aria-valuemin={0}
-			aria-valuenow={value}
-			aria-valuemax={max}
-			tabindex={!disabled ? 0 : undefined}
-			{...$$restProps}
-			on:keydown={onKeyDown}
-			on:pointerdown={onPointerDown}
-			on:pointermove={onPointerMove}
-			on:pointerup={onPointerUp}
-		>
-			<div
-				class="container"
-				bind:this={sliderRef}
-				bind:clientWidth={sliderWidth}
-				bind:clientHeight={sliderHeight}
-			>
-				<div class="track" />
-				<div
-					class="fill"
-					style={vertical ? `height: ${valueOffset}px` : `width: ${valueOffset}px`}
-				/>
-				<div
-					class="thumb"
-					style={vertical ? `bottom: ${valueOffset}px` : `left: ${valueOffset}px`}
-				/>
-			</div>
-		</div>
-	</label>
-{:else}
-	<div
-		class="sterling-slider"
-		class:disabled
-		class:horizontal={!vertical}
-		class:vertical
-		role="slider"
-		aria-valuemin={0}
-		aria-valuenow={value}
-		aria-valuemax={max}
-		tabindex={!disabled ? 0 : undefined}
-		{...$$restProps}
-		on:keydown={onKeyDown}
-		on:pointerdown={onPointerDown}
-		on:pointermove={onPointerMove}
-		on:pointerup={onPointerUp}
-	>
-		<div
-			class="container"
-			bind:this={sliderRef}
-			bind:clientWidth={sliderWidth}
-			bind:clientHeight={sliderHeight}
-		>
-			<div class="track" />
-			<div class="fill" style={vertical ? `height: ${valueOffset}px` : `width: ${valueOffset}px`} />
-			<div class="thumb" style={vertical ? `bottom: ${valueOffset}px` : `left: ${valueOffset}px`} />
-		</div>
-	</div>
-{/if}
+<div class="sterling-slider" class:vertical>
+  {#if $$slots.label}
+    <div class="label">
+      <Label {disabled} for={inputId}>
+        <slot name="label" />
+      </Label>
+    </div>
+  {/if}
+  <div
+    class="slider"
+    class:disabled
+    class:horizontal={!vertical}
+    class:vertical
+    id={inputId}
+    role="slider"
+    aria-valuemin={0}
+    aria-valuenow={value}
+    aria-valuemax={max}
+    tabindex={!disabled ? 0 : undefined}
+    {...$$restProps}
+    on:keydown={onKeyDown}
+    on:pointerdown={onPointerDown}
+    on:pointermove={onPointerMove}
+    on:pointerup={onPointerUp}
+  >
+    <div
+      class="container"
+      bind:this={sliderRef}
+      bind:clientWidth={sliderWidth}
+      bind:clientHeight={sliderHeight}
+    >
+      <div class="track" />
+      <div class="fill" style={vertical ? `height: ${valueOffset}px` : `width: ${valueOffset}px`} />
+      <div class="thumb" style={vertical ? `bottom: ${valueOffset}px` : `left: ${valueOffset}px`} />
+    </div>
+  </div>
+</div>
 
 <style>
-	.sterling-slider-label {
-		display: grid;
-		grid-template-columns: 1fr;
-		grid-template-rows: auto 1fr;
-	}
-
-	.sterling-slider-label.vertical {
-		justify-items: center;
-		height: 100%;
-	}
+  .sterling-slider {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+  }
 
-	.label-content {
-		font-size: 0.7em;
-		color: var(--Display__color--subtle);
-		transition: background-color 250ms, color 250ms, border-color 250ms;
-	}
+  .sterling-slider.vertical {
+    justify-items: center;
+    height: 100%;
+  }
 
-	.label-content.disabled {
-		color: var(--Display__color--disabled);
-	}
+  .label {
+    font-size: 0.7em;
+  }
 
-	.sterling-slider {
-		box-sizing: border-box;
-		outline: none;
-		padding: 0;
-		overflow: visible;
-		display: grid;
-		height: 100%;
-	}
+  .slider {
+    box-sizing: border-box;
+    outline: none;
+    padding: 0;
+    overflow: visible;
+    display: grid;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
 
-	.sterling-slider.labeled {
-		height: unset;
-	}
+  .container {
+    position: relative;
+  }
 
-	.container {
-		position: relative;
-	}
+  .track {
+    position: absolute;
+    background: var(--Display__background-color);
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
 
-	.track {
-		position: absolute;
-		background: var(--Display__background-color);
-	}
+  .fill {
+    background: var(--Display__color);
+    position: absolute;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
 
-	.fill {
-		background: var(--Display__color);
-		position: absolute;
-	}
+  .thumb {
+    background-color: var(--Button__background-color);
+    border-color: var(--Button__border-color);
+    border-radius: 10000px;
+    border-style: var(--Button__border-style);
+    border-width: var(--Button__border-width);
+    box-sizing: border-box;
+    color: var(--Button__color);
+    cursor: pointer;
+    display: block;
+    font: inherit;
+    height: 1.5em;
+    overflow: hidden;
+    padding: 0;
+    text-decoration: none;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+    white-space: nowrap;
+    position: absolute;
+    width: 1.5em;
+  }
 
-	.thumb {
-		background-color: var(--Button__background-color);
-		border-color: var(--Button__border-color);
-		border-radius: 10000px;
-		border-style: var(--Button__border-style);
-		border-width: var(--Button__border-width);
-		box-sizing: border-box;
-		color: var(--Button__color);
-		cursor: pointer;
-		display: block;
-		font: inherit;
-		height: 1.5em;
-		overflow: hidden;
-		padding: 0;
-		text-decoration: none;
-		transition: background-color 250ms, color 250ms, border-color 250ms;
-		white-space: nowrap;
-		position: absolute;
-		width: 1.5em;
-	}
+  /* ----- horizontal ----- */
 
-	/* ----- horizontal ----- */
+  .slider.horizontal {
+    height: 2em;
+  }
 
-	.sterling-slider.horizontal {
-		height: 2em;
-	}
+  .slider.horizontal .container {
+    margin: 0 0.75em;
+  }
 
-	.sterling-slider.horizontal .container {
-		margin: 0 0.75em;
-	}
+  .slider.horizontal .track {
+    left: 0;
+    right: 0;
+    top: 50%;
+    height: 3px;
+    transform: translate(0, -50%);
+  }
 
-	.sterling-slider.horizontal .track {
-		left: 0;
-		right: 0;
-		top: 50%;
-		height: 3px;
-		transform: translate(0, -50%);
-	}
+  .slider.horizontal .fill {
+    height: 3px;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
 
-	.sterling-slider.horizontal .fill {
-		height: 3px;
-		top: 50%;
-		transform: translate(0, -50%);
-	}
+  .slider.horizontal .thumb {
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
 
-	.sterling-slider.horizontal .thumb {
-		top: 50%;
-		transform: translate(-50%, -50%);
-	}
+  /* ----- vertical ----- */
 
-	/* ----- vertical ----- */
+  .slider.vertical {
+    width: 2em;
+  }
+  .slider.vertical .container {
+    margin: 0.75em 0;
+  }
 
-	.sterling-slider.vertical {
-		width: 2em;
-	}
-	.sterling-slider.vertical .container {
-		margin: 0.75em 0;
-	}
+  .slider.vertical .track {
+    bottom: 0;
+    left: 50%;
+    top: 0;
+    transform: translate(-50%, 0);
+    width: 3px;
+  }
 
-	.sterling-slider.vertical .track {
-		bottom: 0;
-		left: 50%;
-		top: 0;
-		transform: translate(-50%, 0);
-		width: 3px;
-	}
+  .slider.vertical .fill {
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 0);
+    width: 3px;
+  }
 
-	.sterling-slider.vertical .fill {
-		bottom: 0;
-		left: 50%;
-		transform: translate(-50%, 0);
-		width: 3px;
-	}
+  .slider.vertical .thumb {
+    left: 50%;
+    transform: translate(-50%, 50%);
+  }
 
-	.sterling-slider.vertical .thumb {
-		left: 50%;
-		transform: translate(-50%, 50%);
-	}
+  /* ----- hover ----- */
 
-	/* ----- hover ----- */
+  .thumb:hover {
+    background-color: var(--Button__background-color--hover);
+    border-color: var(--Button__border-color--hover);
+    color: var(--Button__color--hover);
+  }
 
-	.thumb:hover {
-		background-color: var(--Button__background-color--hover);
-		border-color: var(--Button__border-color--hover);
-		color: var(--Button__color--hover);
-	}
+  /* ----- active ----- */
 
-	/* ----- active ----- */
+  .thumb:active {
+    background-color: var(--Button__background-color--active);
+    border-color: var(--Button__border-color--active);
+    color: var(--Button__color--active);
+  }
 
-	.thumb:active {
-		background-color: var(--Button__background-color--active);
-		border-color: var(--Button__border-color--active);
-		color: var(--Button__color--active);
-	}
+  /* ----- focus ----- */
+  .slider:focus-visible {
+    outline-color: var(--Common__outline-color);
+    outline-offset: var(--Common__outline-offset);
+    outline-style: var(--Common__outline-style);
+    outline-width: var(--Common__outline-width);
+  }
+  /* ----- disabled ----- */
 
-	/* ----- focus ----- */
-	.sterling-slider:focus-visible {
-		outline-color: var(--Common__outline-color);
-		outline-offset: var(--Common__outline-offset);
-		outline-style: var(--Common__outline-style);
-		outline-width: var(--Common__outline-width);
-	}
-	/* ----- disabled ----- */
+  .slider.disabled .track {
+    background: var(--Common__background-color--disabled);
+  }
 
-	.sterling-slider.disabled .track {
-		background: var(--Common__background-color--disabled);
-	}
+  .slider.disabled .fill {
+    background: var(--Common__color--disabled);
+  }
 
-	.sterling-slider.disabled .fill {
-		background: var(--Common__color--disabled);
-	}
+  .slider.disabled .thumb {
+    background-color: var(--Common__background-color--disabled);
+    border-color: var(--Common__border-color--disabled);
+    color: var(--Common__color--disabled);
+    cursor: not-allowed;
+  }
 
-	.sterling-slider.disabled .thumb {
-		background-color: var(--Common__background-color--disabled);
-		border-color: var(--Common__border-color--disabled);
-		color: var(--Common__color--disabled);
-		cursor: not-allowed;
-	}
+  @media (prefers-reduced-motion) {
+    .slider,
+    .track,
+    .fill,
+    .thumb {
+      transition: none;
+    }
+  }
 </style>