feat: add change event on rangeslider

src/lib/components/RangeSlider.svelte

@@ -3,7 +3,7 @@
     TODO:
       - [x] min/max range (not just 0 - 1)
       - [x] step
-      - [ ] on:change event
+      - [x] on:change event
       - [x] Show value while hovered/dragging
         - https://svelte.dev/repl/8af0c98cc61d4f7fbca233282b885eaa?version=3.44.3
       - [x] Tween changes
@@ -23,7 +23,7 @@
       - [x] Maintain step precision / fix float math
       - [x] Disabled state
       - [ ] Change range color / gradient
-      - [ ] Show min/max scale (opt in as prop).  Show above, below, option?
+      - [X] Show min/max scale (opt in as prop).  Show above, below, option?
   */
   import { spring } from 'svelte/motion';
   import { fly } from 'svelte/transition';
@@ -35,14 +35,18 @@
   import Icon from './Icon.svelte';
   import { cls } from '../utils/styles';
   import { getComponentTheme } from './theme';
+	import { createEventDispatcher } from 'svelte';
 
   export let min = 0;
   export let max = 100;
   export let step = 1;
   export let value = [min, max];
   export let disabled = false;
+  export let alwaysShow = false;
+  export let showLimits = false;
 
   const theme = getComponentTheme('RangeSlider');
+  const dispatch = createEventDispatcher();
 
   $: stepPercent = step / (max - min);
   $: stepDecimals = decimalCount(step);
@@ -51,8 +55,12 @@
 
   let isMoving = false;
   let lastMoved: 'start' | 'range' | 'end' = 'range';
-  let showStartValue = false;
-  let showEndValue = false;
+  /**
+   * showStartValue is used to control if we should display the value of value[0]
+   * defaults to alwaysShow, so if the prop is true we always display it, otherwise we only display it on hover
+   */
+  let showStartValue = alwaysShow;
+  let showEndValue = alwaysShow;
   let ignoreClickEvents = false;
 
   const start = spring(0);
@@ -61,6 +69,8 @@
   const end = spring(0);
   $: end.set(scale(value[1]));
 
+  $: dispatch('change', value)
+
   function onMoveStart(which: 'start' | 'range' | 'end') {
     return function (e: MouseEvent) {
       ignoreClickEvents = true;
@@ -69,18 +79,18 @@
       switch (which) {
         case 'start':
           lastMoved = 'start';
-          showStartValue = true;
+          showStartValue = alwaysShow ? true: true;
           break;
 
         case 'range':
           lastMoved = 'range';
-          showStartValue = true;
-          showEndValue = true;
+          showStartValue = alwaysShow ? true: true;
+          showEndValue = alwaysShow ? true: true;
           break;
 
         case 'end':
           lastMoved = 'end';
-          showEndValue = true;
+          showEndValue = alwaysShow ? true: true;
           break;
       }
     };
@@ -139,8 +149,8 @@
       }, 100);
 
       isMoving = false;
-      showStartValue = false;
-      showEndValue = false;
+      showStartValue = alwaysShow ? true: false;
+      showEndValue = alwaysShow ? true: false;
     };
   }
 
@@ -168,8 +178,8 @@
   function onMouseLeave(which: 'start' | 'range' | 'end') {
     return function (e: MouseEvent) {
       if (isMoving === false) {
-        showStartValue = false;
-        showEndValue = false;
+        showStartValue = alwaysShow ? true: false;
+        showEndValue = alwaysShow ? true: false;
       }
     };
   }
@@ -217,6 +227,7 @@
       value = [value[0], round(newValue, stepDecimals)];
       lastMoved = 'end';
     }
+
   }
 </script>
 
@@ -236,6 +247,24 @@
   on:keydown={onKeyDown}
   {...$$restProps}
 >
+  {#if showLimits}
+    <output
+      style="left: 0; top: 2.7rem;"
+      class="value absolute top-1/2 -translate-x-1/2 -translate-y-[180%] text-xs text-white bg-accent-500 rounded-full px-2 shadow"
+      transition:fly={{ y: 4, duration: 300 }}
+    >
+      {min}
+    </output>
+    <output
+    style="right: -35px; top: 2.7rem;"
+    class="value absolute top-1/2 -translate-x-1/2 -translate-y-[180%] text-xs text-white bg-accent-500 rounded-full px-2 shadow"
+    transition:fly={{ y: 4, duration: 300 }}
+  >
+    {max}
+  </output>
+  {/if}
+
+
   <div
     on:mouseenter={onMouseEnter('range')}
     on:mouseleave={onMouseLeave('range')}

src/routes/docs/components/RangeSlider/+page.svelte

@@ -48,3 +48,16 @@
 <Preview>
   <RangeSlider max={100} step={10} />
 </Preview>
+
+<h2>Always show</h2>
+
+<Preview>
+  <RangeSlider alwaysShow={true}/>
+</Preview>
+
+
+<h2>Show limits</h2>
+
+<Preview>
+  <RangeSlider showLimits={true}/>
+</Preview>