Merge pull request evidence-dev#3013 from evidence-dev/slider-large-max-bug

Slider large max bug

Author: kwongz

.changeset/spicy-grapes-decide.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+fixed slider delay with large min max value difference

packages/ui/core-components/src/lib/atoms/inputs/slider/Slider.stories.svelte

@@ -19,6 +19,11 @@
 	import Slider from './Slider.svelte';
 	import { Query } from '@evidence-dev/sdk/usql';
 	import { query } from '@evidence-dev/universal-sql/client-duckdb';
+	import Dropdown from '../dropdown/Dropdown.svelte';
+	import DropdownOption from '../dropdown/helpers/DropdownOption.svelte';
+	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
+	// From layout.js
+	const inputStore = getInputContext();
 
 	// const data = Query.create(`SELECT *, MAX(fare) as max_fare from flights limit 10`, query);
 	const data = Query.create(
@@ -30,6 +35,9 @@
 	LIMIT 10`,
 		query
 	);
+
+	$: dynamicMaxColumn = $inputStore?.['maxCol']?.value ? $inputStore['maxCol'].value : 1000;
+	$: dynamicMinColumn = $inputStore?.['maxCol']?.value ? $inputStore['minCol'].value : 0;
 </script>
 
 <Template let:args>
@@ -134,8 +142,37 @@
 	args={{
 		defaultValue: '18',
 		fmt: 'usd0',
-		steps: '2',
+		step: '2',
 		max: '20',
 		min: '0'
 	}}
 />
+<Story name="Large Max Value, small steps">
+	<Slider title="A" name="A" min="0" max="10" step="1" />
+	<Slider title="B" name="B" min="0" max="100" step="1" />
+	<Slider title="C" name="C" min="0" max="1000" step="1" />
+	<Slider title="D" name="D" min="0" max="10000" step="1" />
+	<Slider title="E" name="E" min="0" max="100000" step="1" />
+	<Slider title="F" name="F" min="0" max="1000000" step="1" />
+	<Slider title="G" name="G" min="0" max="7978" step="1" />
+	<Slider title="H" name="H" min="0" max="79789" step="1" />
+	<Slider title="I" name="I" min="0" max="79789" step="1000" />
+	<Slider title="J" name="J" min="0" max="1007" step="1" />
+</Story>
+<Story name="Reactive Max Min">
+	<Dropdown name="minCol">
+		<DropdownOption value={0} />
+		<DropdownOption value={1000} />
+	</Dropdown>
+	{#if $inputStore['minCol']}
+		minCol Value: {$inputStore['minCol'].value}
+	{/if}
+	<Dropdown name="maxCol">
+		<DropdownOption value={10000} />
+		<DropdownOption value={100000} />
+	</Dropdown>
+	{#if $inputStore['maxCol']}
+		maxCol Value: {$inputStore['maxCol'].value}
+	{/if}
+	<Slider step="1" name="slider" title="Slider" max={dynamicMaxColumn} min={dynamicMinColumn} />
+</Story>

packages/ui/core-components/src/lib/atoms/inputs/slider/_Slider.svelte

@@ -76,13 +76,13 @@
 		}
 	}
 
-	if (min !== undefined) {
+	$: if (min !== undefined) {
 		min = validateNumber(min, 'min');
 	}
-	if (max !== undefined) {
+	$: if (max !== undefined) {
 		max = validateNumber(max, 'max');
 	}
-	if (max !== undefined && min !== undefined) {
+	$: if (max !== undefined && min !== undefined) {
 		checkMinMax(min, max);
 	}
 
@@ -163,6 +163,19 @@
 			}
 		}
 	}
+
+	// handle steps, slider lags when there are greater then 1000 steps/ticks between max and min
+	$: sliderTicks = max - min;
+	$: minStep = sliderTicks / 1000;
+	const handleSteps = () => {
+		if (sliderTicks > 1000 && step < minStep) {
+			step = minStep;
+		}
+	};
+
+	$: if (sliderTicks > 1000) {
+		handleSteps();
+	}
 </script>
 
 <HiddenInPrint enabled={hideDuringPrint}>