update/add a bunch of examples

src/components/Demos/examples/float/Always.svelte

@@ -0,0 +1,12 @@
+<script hide>
+  import RangeSlider from "svelte-range-slider-pips";
+  let values = [25, 75];
+</script>
+
+<RangeSlider id="always" float range bind:values />
+
+<style>
+  :global(#always .rangeFloat) {
+    opacity: 1;
+  }
+</style>

src/components/Demos/examples/float/Float.svelte

@@ -9,6 +9,6 @@
   };
 </script>
 
-<RangeSlider float range bind:values bind:slider={slider} />
+<RangeSlider float range bind:values bind:slider />
 
 <code data-values title="The output slider values">{values}</code>

src/components/Demos/examples/float/Focus.svelte

@@ -0,0 +1,12 @@
+<script>
+  import RangeSlider from 'svelte-range-slider-pips';
+
+  let slider;
+
+  $: if ( slider ) {
+    slider.querySelector('.rangeHandle').focus();
+  }
+</script>
+
+<RangeSlider bind:slider float />
+

src/components/Demos/examples/float/NoHover.svelte

@@ -3,6 +3,17 @@
   let values = [25,75];
 </script>
 
+<p>Regular (with Hover)</p> 
+<RangeSlider float range bind:values />
+
+<p>No Hover</p>
 <RangeSlider float hoverable={false} range bind:values />
 
-<code data-values title="The output slider values">{values}</code>
+<code data-values title="The output slider values">{values}</code>
+
+<style>
+  p {
+    margin-block-start: 2rem;
+    margin-block-end: -2rem;
+  }
+</style>

src/components/Demos/examples/pips/PipExtreme.svelte

@@ -6,9 +6,21 @@
   /* endhide */
 
   let value = 30;
-  const validValues = [2, 6, 15, 73];
+  let validValues = [10, 30, 90];
 
-  // valid class to hide the pips for invalid values
+  /** 
+   * function to generate a random array of values. In reality
+   * you would have more reasonable logic to generate the values
+   */
+  const randomize = () => {
+    const count = 3 + Math.floor(Math.random() * 3);
+    const valuesArray = new Array(count).fill(0).map((_, i) => Math.floor(Math.random() * 100));
+    return valuesArray;
+  };
+
+  const setPipValues = () => (validValues = randomize());
+
+  // valid class to display a red handle if invalid
   $: isValid = validValues.includes(value);
 
   // here we create a <style> tag which will be inserted into the page
@@ -29,6 +41,8 @@
   <RangeSlider id="testSlider" bind:value float pips all="label" hoverable pipstep={1} />
 </div>
 
+<button type="button" on:click={setPipValues}>Randomize</button>
+
 <code data-values title="The output slider values">{value}</code>
 
 <!-- hide -->

src/components/Demos/examples/range/Pushy.svelte

@@ -6,7 +6,7 @@
 <div data-grid>
   <span hide>Pushy</span>
   <RangeSlider range pushy pips bind:values />
-  <span hide>Regular</span>
+  <span hide>Not Pushy</span>
   <RangeSlider range pips bind:values />
 </div>
 

src/components/Demos/examples/range/PushyGap.svelte

@@ -0,0 +1,37 @@
+<script>
+  import RangeSlider from 'svelte-range-slider-pips';
+  let values = [40,60];
+  let min = 0;
+  let max = 100;
+  let gap = 15;
+
+  /**
+   * maintain a distance of 1 between the handles when
+   * the user is dragging the handle
+   */
+   const slide = ({ detail }) => {
+    if (detail.activeHandle === 0 && values[1] < detail.value + gap) {
+      values[1] = detail.value + gap;
+    }
+    if (detail.activeHandle === 1 && values[0] > detail.value - gap) {
+      values[0] = detail.value - gap;
+    }
+  };
+
+  /**
+   * enforce the gap between the handles when the user
+   * stops dragging the handle
+   */
+  const stop = ({ detail }) => {
+    if (detail.activeHandle === 0 && detail.value >= max - gap) {
+      values[0] = max - gap;
+    }
+    if (detail.activeHandle === 1 && detail.value <= min + gap) {
+      values[1] = min + gap;
+    }
+  };
+</script>
+
+<RangeSlider range pushy pips bind:values on:change={slide} on:stop={stop} {min } {max} />
+
+<code data-values title="The output slider values">{values}</code>

src/components/Demos/recipes/daisyui/Daisy.svelte

@@ -15,10 +15,10 @@
 </script>
 
 <div class="daisy-ui" class:minFlip class:maxFlip class:rangeFlip>
-  <RangeSlider pips float bind:values />
-  <RangeSlider pips float range bind:values />
-  <RangeSlider pips float range="min" bind:values={minValues} step={5} />
-  <RangeSlider pips float range="max" bind:values={minValues} step={5} />
+  <RangeSlider pips float pushy values={[20,80]} />
+  <RangeSlider pips float pushy range bind:values />
+  <RangeSlider pips float pushy range="min" bind:values={minValues} step={5} />
+  <RangeSlider pips float pushy range="max" bind:values={minValues} step={5} />
 </div>
 
 <!-- hide -->

src/components/Demos/recipes/monthpicker/MonthPicker.css

@@ -0,0 +1,48 @@
+  /* general RangeSlider styling */
+  #label.rangeSlider {
+    font-size: 12px;
+    text-transform: uppercase;
+  }
+
+  #label.rangeSlider.focus .rangeBar {
+    background: linear-gradient(to left, var(--handle) 20%, var(--handle-focus));
+  }
+
+  #label.rangeSlider.focus:has([data-handle="1"].active) .rangeBar {
+    background: linear-gradient(to right, var(--handle) 20%, var(--handle-focus));
+  }
+
+  /* Move the floating label on top of the handle */
+
+  #label.rangeSlider .rangeHandle {
+    width: 2.8em;
+    height: 2.8em;
+    background: none;
+  }
+
+  #label.rangeSlider .rangeFloat {
+    opacity: 1;
+    background: transparent;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  /* Make the handles look like Squircles */
+
+  #label.rangeSlider .rangeHandle .rangeNub {
+    border-radius: 0;
+    transform: translate(0, 0);
+    mask-image: url("data:image/svg+xml;utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E %3Cpath d=' M 100,0 C 22.460000000000008,0 0,22.460000000000008 0,100  0,177.54 22.460000000000008,200 100,200  177.54,200 200,177.54 200,100  200,22.460000000000008 177.54,0 100,0 ' style='fill: black;'%3E%3C/path%3E %3C/svg%3E");
+    mask-size: cover;
+  }
+
+  /* Hide the pips, and values when selected */
+
+  #label.rangeSlider .pip {
+    background: transparent;
+  }
+
+  #label.rangeSlider .pip.selected .pipVal {
+    opacity: 0;
+    transition: all 0.25s ease;
+  }

src/components/Demos/recipes/monthpicker/MonthPicker.svelte

@@ -0,0 +1,59 @@
+<script>
+  import RangeSlider from "svelte-range-slider-pips";
+  import css from './MonthPicker.css?inline';
+  /* hide */
+  const renderCss = `<style>${css}</style>`;
+  /* endhide */
+
+  let values = [2, 9];
+  let dateFormat = new Intl.DateTimeFormat("en", { month: "short" });
+
+  const formatter = (v, i, p) => {
+    return dateFormat.format(new Date(new Date().getFullYear(), v, 1));
+  };
+
+  /**
+   * maintain a distance of 1 between the handles when
+   * the user is dragging the handle
+   */
+  const slide = ({ detail }) => {
+    if (detail.activeHandle === 0 && values[1] < detail.value + 1) {
+      values[1] = detail.value + 1;
+    }
+    if (detail.activeHandle === 1 && values[0] > detail.value - 1) {
+      values[0] = detail.value - 1;
+    }
+  };
+
+  /**
+   * enforce the gap between the handles when the user
+   * stops dragging the handle
+   */
+  const stop = ({ detail }) => {
+    if (detail.activeHandle === 0 && detail.value >= 10) {
+      values[0] = 10;
+    }
+    if (detail.activeHandle === 1 && detail.value <= 0) {
+      values[1] = 1;
+    }
+  };
+</script>
+
+<RangeSlider
+  id="label"
+  bind:values
+  float
+  pips
+  first="label"
+  last="label"
+  range
+  max={11}
+  {formatter}
+  on:change={slide}
+  on:stop={stop}
+/>
+
+
+<!-- hide -->
+{@html renderCss}
+<!-- endhide -->

src/components/Demos/styling/pips/Future.css

@@ -0,0 +1,113 @@
+@import url('https://fonts.googleapis.com/css2?family=Mohave:ital,wght@0,300..700;1,300..700&display=swap');
+
+/* Here we target specific pips and show them,
+  which was the imaginary requirement of the slider design */
+
+  #future .pip[data-val="75000"],
+  #future .pip[data-val="250000"],
+  #future .pip[data-val="750000"],
+  #future .pip[data-val="925000"] {
+    display: block;
+  }
+
+  #future .pip[data-val="75000"] .pipVal,
+  #future .pip[data-val="925000"] .pipVal {
+    top: -2.25em;
+    transform: translateX(-20%);
+  }
+
+  #future .pip[data-val="925000"] .pipVal {
+    transform: translateX(-80%);
+  }
+
+/* Range Slider / Bar customization */
+
+#future.rangeSlider {
+  font-family: "Mohave", sans-serif;
+  font-weight: 300;
+  font-style: italic;
+  margin-inline: 100px;
+  --handle-focus: limegreen;
+  --float-text: black;
+  height: 3px;
+  background: black;
+}
+
+#future .rangeBar {
+  height: 5px;
+  top: -1px;
+  background: limegreen;
+}
+
+/* Pips customization */
+
+#future .pip {
+  display: none;
+}
+
+#future .pip {
+  background: none;
+  top: 0;
+  height: 1px;
+}
+
+#future .pip::before {
+  content: "";
+  position: absolute;
+  background: black;
+  height: 1em;
+  width: 1px;
+  top: -0.5em;
+  transform: translateY(-2px) translateX(-1px) rotate(10deg);
+}
+
+#future .pip.first,
+#future .pip.last {
+  display: block;
+  top: 0;
+  background: transparent;
+}
+
+#future .pipVal {
+  font-size: 14px;
+}
+
+#future .pip.first .pipVal {
+  top: 0;
+  left: -1em;
+  transform: translateX(-100%) translateY(-50%);
+  text-align: right;
+}
+
+#future .pip.last .pipVal {
+  top: 0;
+  right: -1em;
+  transform: translateX(100%) translateY(-50%);
+  text-align: left;
+}
+
+#future .pip.selected .pipVal {
+  opacity: 0;
+}
+
+/* Floats / Handles customization */
+
+#future .rangeHandle {
+  height: 7px;
+  top: 1px;
+}
+
+#future .rangeNub {
+  transform: none;
+  background: lime;
+  box-shadow: 0 0 0px 2px black;
+}
+
+#future .rangeFloat {
+  background: linear-gradient(to right, rgb(240, 241, 245, 0.25), rgb(240, 241, 245, 1) 20% 80%, rgb(240, 241, 245, 0.25));
+  top: -0.4em;
+  padding: 0.1em 1em;
+  line-height: 1;
+  font-weight: 600;
+  font-size: 1.25em;
+}