change max pips from 1000 -> 500

- there's a significant perf overhead with too many pips

I've been back and forth on this for a while, and while running tests
and using wild values for pips... the perf issues caught up and I can't
see any real scenario where it would be useful to display more than 500
pips (honestly, 200+ is still more than is visually useful) ... so I've
reduced the max that will render to 501.

Author: simeydotme

dist/range-slider-pips.js

@@ -34,7 +34,7 @@ let clientStart = null;
 $: stepMax = vertical ? 50 : 100;
 $: tooManySteps = (max - min) / step >= stepMax;
 let pipCount = 0;
-const limitPipCount = 1e3;
+const limitPipCount = 500;
 let finalPipStep = 1;
 $: {
   finalPipStep = pipstep ?? (tooManySteps ? (max - min) / (stepMax / 5) : 1);

dist/range-slider-pips.mjs

@@ -54,6 +54,7 @@ export let darkmode = false;
 export let springValues = { stiffness: 0.15, damping: 0.4 };
 export let spring = true;
 const dispatch = createEventDispatcher();
+let isMounted = false;
 let valueLength = 0;
 let focus = false;
 let handleActivated = false;
@@ -200,10 +201,14 @@ onMount(() => {
       rafId = updateSliderSize(entries[0].target);
     });
     resizeObserver.observe(slider);
+    setTimeout(() => {
+      isMounted = true;
+    }, 16);
   }
   return () => {
     if (rafId) cancelAnimationFrame(rafId);
     resizeObserver?.disconnect?.();
+    isMounted = false;
   };
 });
 function targetIsHandle(el) {
@@ -538,8 +543,8 @@ function ariaLabelFormatter(value2, index) {
       on:blur={sliderBlurHandle}
       on:focus={sliderFocusHandle}
       on:keydown={sliderKeydown}
-      style:z-index={zindex}
       style:--handle-pos={$springPositions[index]}
+      style="z-index: {zindex}; {isMounted ? '' : 'opacity: 0;'}"
       aria-label={ariaLabels[index]}
       aria-valuemin={range === true && index === 1 ? values[0] : min}
       aria-valuemax={range === true && index === 0 ? values[1] : max}
@@ -575,6 +580,7 @@ function ariaLabelFormatter(value2, index) {
       style:--range-start={rangeStartPercent($springPositions)}
       style:--range-end={rangeEndPercent($springPositions)}
       style:--range-size={rangeEndPercent($springPositions) - rangeStartPercent($springPositions)}
+      style={isMounted ? '' : 'opacity: 0;'}
     >
       {#if rangeFloat}
         <span class="rangeFloat">
@@ -1008,4 +1014,9 @@ function ariaLabelFormatter(value2, index) {
   :global(.rangeSlider.rsDisabled .rangeNub) {
     background-color: var(--handle-inactive);
   }
+
+  :global(.rangeSlider .rangeBar),
+  :global(.rangeSlider .rangeHandle) {
+    transition: opacity 0.2s ease;
+  }
 </style>

dist/svelte/components/RangePips.svelte

@@ -1,6 +1,6 @@
 {
   "name": "svelte-range-slider-pips",
-  "version": "4.0.0-beta.4",
+  "version": "4.0.0-beta.5",
   "description": "Multi-Thumb, Accessible, Beautiful Range Slider with Pips",
   "repository": {
     "type": "git",

dist/svelte/components/RangeSlider.svelte

@@ -52,7 +52,7 @@
 
   // track the number of pips we're actually going to render
   let pipCount = 0;
-  const limitPipCount = 1000;
+  const limitPipCount = 500;
   // track the final pipstep we're going to use
   let finalPipStep = 1;
 

package-lock.json

@@ -72,6 +72,9 @@
   // prepare dispatched events
   const dispatch = createEventDispatcher();
 
+  // loading
+  let isMounted = false;
+
   // state management
   let valueLength = 0;
   let focus = false;
@@ -282,10 +285,14 @@
         rafId = updateSliderSize(entries[0].target as HTMLDivElement);
       }) as ResizeObserver;
       resizeObserver.observe(slider);
+      setTimeout(() => {
+        isMounted = true;
+      }, 16);
     }
     return () => {
       if (rafId) cancelAnimationFrame(rafId);
       resizeObserver?.disconnect?.();
+      isMounted = false;
     };
   });
 
@@ -794,8 +801,8 @@
       on:blur={sliderBlurHandle}
       on:focus={sliderFocusHandle}
       on:keydown={sliderKeydown}
-      style:z-index={zindex}
       style:--handle-pos={$springPositions[index]}
+      style="z-index: {zindex}; {isMounted ? '' : 'opacity: 0;'}"
       aria-label={ariaLabels[index]}
       aria-valuemin={range === true && index === 1 ? values[0] : min}
       aria-valuemax={range === true && index === 0 ? values[1] : max}
@@ -831,6 +838,7 @@
       style:--range-start={rangeStartPercent($springPositions)}
       style:--range-end={rangeEndPercent($springPositions)}
       style:--range-size={rangeEndPercent($springPositions) - rangeStartPercent($springPositions)}
+      style={isMounted ? '' : 'opacity: 0;'}
     >
       {#if rangeFloat}
         <span class="rangeFloat">
@@ -1264,4 +1272,9 @@
   :global(.rangeSlider.rsDisabled .rangeNub) {
     background-color: var(--handle-inactive);
   }
+
+  :global(.rangeSlider .rangeBar),
+  :global(.rangeSlider .rangeHandle) {
+    transition: opacity 0.2s ease;
+  }
 </style>

package.json

@@ -79,6 +79,10 @@
         "name": "pipsteps",
         "path": "/test/range-slider/pips/pipsteps"
       },
+      {
+        "name": "pipsteps-large",
+        "path": "/test/range-slider/pips/pipsteps-large"
+      },
       {
         "name": "steps",
         "path": "/test/range-slider/pips/steps"

src/lib/components/RangePips.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import RangeSlider from '$lib/components/RangeSlider.svelte';
+
+  let hasPipstep = false;
+  let hasAlternatePipstep = false;
+
+  function togglePipstep() {
+    hasPipstep = !hasPipstep;
+  }
+
+  function toggleAlternatePipstep() {
+    hasAlternatePipstep = !hasAlternatePipstep;
+  }
+</script>
+
+<div class="slider-list">
+  <h5>Very large number of pips, explicitly set</h5>
+  <RangeSlider id="very-large-pips" pips first="label" last="label" max={10000} pipstep={1} />
+</div>