Svelte-Splitpanes - Prog Resize

Programmatic resizing

This example shows the programmatic way of resizing panes with two-way data biding. And how it works both ways.
Changing programmatically the size one pane, will shrink/expand the other panes that have no specified size, as you can see in the example.

50%

Auto-Calculated

<script>
	import { Pane, Splitpanes } from 'svelte-splitpanes';

	import RangeSlider from 'svelte-range-slider-pips';

	let value = [50];
</script>

<RangeSlider float bind:values={value} min={0} step={0.01} max={100} />
<Splitpanes style="height: 400px">
	<Pane bind:size={value[0]}>
		<span>{Math.round(value[0])}%</span>
	</Pane>
	<Pane>
		<span>Auto-Calculated</span>
	</Pane>
</Splitpanes>

previous ChangeOrientation

next Toggle Panes