RangeSlider | tcpsystems/ui

Try it

Invoice amount 100 USD to 500 USD

Svelte

<RangeSlider label="Invoice amount" min={0} max={1000} low={100} high={500} unit="USD" />

Examples

Invoice range

Invoice amount 100 USD to 500 USD

Invoice range.svelte

<script lang="ts">
	import RangeSlider from '@tcpsystems/ui/foundation/RangeSlider';
	let low = $state(100);
	let high = $state(500);
</script>

<RangeSlider label="Invoice amount" min={0} max={1000} bind:low bind:high unit="USD" />

Bounds and steps

Retention window 1 days to 90 days

CPU budget 2 vCPU to 2.5 vCPU

Bounds and steps.svelte

<script lang="ts">
	import RangeSlider from '@tcpsystems/ui/foundation/RangeSlider';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	let low = $state(1);
	let high = $state(90);
	let cpuLow = $state(2);
	let cpuHigh = $state(2.5);
</script>

<Stack>
	<RangeSlider label="Retention window" min={1} max={90} bind:low bind:high unit="days" />
	<RangeSlider label="CPU budget" min={0} max={8} step={0.5} bind:low={cpuLow} bind:high={cpuHigh} unit="vCPU" />
</Stack>

API

Import

import RangeSlider from '@tcpsystems/ui/foundation/RangeSlider';

Prop	Type	Default
`label`	`string`	none
`min`	`number`	none
`max`	`number`	none
`step?`	`number`	`1`
`low?`	`number`	`$bindable(min)`
`high?`	`number`	`$bindable(max)`
`names?`	`[string, string]`	none
`unit?`	`string`	`''`

Hook	Kind
`.tcp-range`	Root class