Slider | tcpsystems/ui

Try it

Deployment replicas 3

Svelte

<Slider label="Deployment replicas" min={1} max={12} value={3} />

Examples

Replicas

Deployment replicas 3

Replicas.svelte

<script lang="ts">
	import Slider from '@tcpsystems/ui/foundation/Slider';
	let value = $state(3);
</script>

<Slider label="Deployment replicas" min={1} max={12} bind:value />

Steps and bounds

CPU allocation 0 vCPU

Cache allocation 100 %

Steps and bounds.svelte

<script lang="ts">
	import Slider from '@tcpsystems/ui/foundation/Slider';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	let cpu = $state(0);
	let cache = $state(100);
</script>

<Stack>
	<Slider label="CPU allocation" min={0} max={4} step={0.25} unit="vCPU" bind:value={cpu} />
	<Slider label="Cache allocation" min={0} max={100} step={10} unit="%" bind:value={cache} />
</Stack>

Disabled and hidden value

Managed retention 30 days

Alert sensitivity

Disabled and hidden value.svelte

<script lang="ts">
	import Slider from '@tcpsystems/ui/foundation/Slider';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	let value = $state(3);
</script>

<Stack>
	<Slider label="Managed retention" min={1} max={90} value={30} unit="days" disabled />
	<Slider label="Alert sensitivity" min={1} max={5} showValue={false} bind:value />
</Stack>

API

Import

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

Prop	Type	Default
`label`	`string`	none
`value?`	`number`	`$bindable(0)`
`min`	`number`	none
`max`	`number`	none
`step?`	`number`	`1`
`unit?`	`string`	`''`
`showValue?`	`boolean`	`true`
`name?`	`string`	none
`disabled?`	`boolean`	`false`

Hook	Kind
`.tcp-slider-field`	Root class
`data-unit`	Data attribute