fluent-svelte-extra 1.1.6 → 1.1.8

package/RangeSlider/RangeSlider.svelte

@@ -4,48 +4,39 @@ import Slider from '@bulatdashiev/svelte-slider';
 import { TextBlock } from 'fluent-svelte';
 export let min = 1;
 export let max = 100;
+export let step = 1;
 let valuesText = min + ',' + max;
 export let values = [min, max];
+function escapeFloatingPoint(number) {
+    return Number(parseFloat(number).toPrecision(12));
+}
 $: {
     if (values.toString() !== valuesText) {
-        valuesText = values[0] + "," + values[1];
+        valuesText = escapeFloatingPoint(values[0]) + "," + escapeFloatingPoint(values[1]);
     }
 }
 function handleChange(event) {
-    valuesText = event.detail.toString();
+    valuesText = escapeFloatingPoint(event.detail[0]) + "," + escapeFloatingPoint(event.detail[1]);
     dispatch('change', event.detail);
 }
 function handleMouseDown() {
     document.addEventListener("mouseup", () => {
         dispatch('finish', valuesText.toString());
-    }, { once: true });
+    }, {
+        once: true
+    });
 }
 </script>
 
 <div id="sliderComp" {...$$restProps}>
- <Slider
-     bind:value={values}
-     {min}
-     {max}
-     range
-     order
-     on:input={handleChange}
- >
-     <div
-         slot="left"
-         class="handle"
-         on:mousedown={handleMouseDown}
-     />
-     <div
-         slot="right"
-         class="handle"
-         on:mousedown={handleMouseDown}
-     />
- </Slider>
- <div id="vals">
-     <TextBlock>{valuesText.split(',')[0]}</TextBlock>
-     <TextBlock>{valuesText.split(',')[1]}</TextBlock>
- </div>
+    <Slider bind:value={values} {min} {max} {step} range order on:input={handleChange}>
+        <div slot="left" class="handle" on:mousedown={handleMouseDown} />
+        <div slot="right" class="handle" on:mousedown={handleMouseDown} />
+    </Slider>
+    <div id="vals">
+        <TextBlock>{valuesText.split(',')[0]}</TextBlock>
+        <TextBlock>{valuesText.split(',')[1]}</TextBlock>
+    </div>
 </div>
 
-<style>#vals{justify-content:space-between}#vals,.handle{align-items:center;display:flex}.handle{height:0;justify-content:center;width:0}.handle:after{background-color:#62cdfe;border:5px solid #4d4d4d;border-radius:50%;box-sizing:border-box;content:" ";height:20px;position:absolute;transition:all .1s linear!important;width:20px}.handle:hover:after{border:4px solid #4d4d4d}.handle:active:after{border:6px solid #4d4d4d;box-shadow:0 0 10px rgba(0,0,0,.4)}#sliderComp{--fds-thumb-bg:transparent;--fds-progress-bg:#62cdfe;--fds-track-bg:#454545}</style>
+<style>#vals{justify-content:space-between}#vals,.handle{align-items:center;display:flex}.handle{background-color:var(--fds-control-solid-fill-default);block-size:20px;border-radius:100%;box-shadow:0 0 0 1px var(--fds-control-stroke-default);inline-size:20px;justify-content:center;z-index:10}.handle:before{background-color:var(--fds-accent-default);block-size:12px;border-radius:100%;content:"";inline-size:12px;transition:var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing) transform}.handle:hover:before{transform:scale(1.167)}.handle:active:before{background-color:var(--fds-accent-tertiary);transform:scale(.833)}#sliderComp{--fds-thumb-bg:transparent;--fds-progress-bg:var(--fds-accent-text-primary);--fds-track-bg:var(--fds-control-strong-fill-default)}</style>

package/RangeSlider/RangeSlider.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         min?: number;
         max?: number;
+        step?: number;
         values?: number[];
     };
     events: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluent-svelte-extra",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "description": "A faithful implementation of Microsoft's Fluent Design System in Svelte.",
   "homepage": "https://github.com/OpenAnime/fluent-svelte-extra",
   "license": "MIT",