TYPESCRIPT
Copy
import { RangeSlider } from '@skeletonlabs/skeleton';
Source
Page Source
WAI-ARIA
Usage
Props
Slots
Events
Keyboard
Demo


Combines a native range input with datalist ticks to create a powerful range slider element.

Labeled

TYPESCRIPT
Copy
let value = 15;
let max = 25;
HTML
Copy
<RangeSlider name="range-slider" bind:value={value} max={25} step={1} ticked>
	<div class="flex items-center justify-between">
		<div class="font-bold">Label</div>
		<div class="text-xs">{value} / {max}</div>
	</div>
</RangeSlider>

This component implements restProps. This passes all extra attributes to the component's input elements.

Name	Type	Value	Description
name	string	-	Required. Set a unique name for the input.
id	string	-	Provide a unique input id. Auto-generated by default
value	number	0	Set the input value.
min	number	0	Set the input minimum range.
max	number	100	Set the input maximum range.
step	number	1	Set the input step offset.
ticked	boolean	false	Enables tick marks. See browser support below.
accent	string	'accent-surface-900 dark:accent-surface-50'	Provide classes to set the input accent color.
label	string	-	A semantic ARIA label.

Usage
Props
Slots
Events
Keyboard
Name	Default	Fallback	Description
default	✓	-	-
trail	-	-	A label slot directly below the range slider.


Source
Page Source
WAI-ARIA
Usage
Props
Slots
Events
Keyboard
Name	Type	Element	Response	Description
on:click	forwarded	<input>	-	-
on:change	forwarded	<input>	-	-
on:blur	forwarded	<input>	-	-



Source
Page Source
WAI-ARIA
Usage
Props
Slots
Events
Keyboard
Keys	Description
Right Arrow or Up Arrow	Increase the value of the slider by one step.
Left Arrow or Down Arrow	Decrease the value of the slider by one step.
Home	Set the slider to the first allowed value in its range.
End	Set the slider to the last allowed value in its range.
Page Up	Increase the slider value by a large amount.
Page Down	Decrease the slider value by a large amount.


Slide Toggles
A sliding toggle element that can capture input from a user.

TYPESCRIPT
Copy
import { SlideToggle } from '@skeletonlabs/skeleton';
Source
Page Source
WAI-ARIA
Usage
Props
Slots
Events
Demo

TYPESCRIPT
Copy
let value: boolean = false;
HTML
Copy
<SlideToggle name="slide" bind:checked={value} />
This component provides an alternative UI for a checkbox input element.

Labeled

HTML
Copy
<SlideToggle name="slider-label" checked>(label)</SlideToggle>
Customized
Slide toggles styles and colors can be easily customized with the active and size properties.


HTML
Copy
<SlideToggle name="slider-large" checked active="bg-primary-500" size="lg" />
Checkbox Attributes
This component supports Svelte's $$restProps, which allows for required, disabled, and any other valid checkbox input attributes.

HTML
Copy
<SlideToggle ... required disabled />

Usage
Props
Slots
Events
This component implements restProps. This passes all extra attributes to the component's input elements.

Name	Type	Value	Description
name	string	-	Required. Set a unique name for the input.
checked	boolean	false	The checked state of the input element.
size	'sm' | 'md' | 'lg'	'md'	Sets the size of the component.
background	string	'bg-surface-400 dark:bg-surface-700'	Provide classes to set the inactive state background color.
active	string	'bg-surface-900 dark:bg-surface-300'	Provide classes to set the active state background color.
border	string	-	Provide classes to set the border styles.
rounded	string	'rounded-full'	Provide classes to set border radius styles.
label	string	-	Provide a semantic label.


TYPESCRIPT
Copy
import { SlideToggle } from '@skeletonlabs/skeleton';
Source
Page Source
WAI-ARIA
Usage
Props
Slots
Events
Name	Default	Fallback	Description
default	✓	-	-

Slide Toggles
A sliding toggle element that can capture input from a user.

TYPESCRIPT
Copy
import { SlideToggle } from '@skeletonlabs/skeleton';
Source
Page Source
WAI-ARIA
Usage
Props
Slots
Events
Name	Type	Element	Response	Description
on:keyup	dispatched	-	{ event }	Fires when the component is focused and key is pressed.
on:click	forwarded	<input>	-	-
on:keydown	forwarded	<input>	-	-
on:keypress	forwarded	<input>	-	-
on:mouseover	forwarded	<input>	-	-
on:change	forwarded	<input>	-	-
on:focus	forwarded	<input>	-	-
on:blur	forwarded	<input>	-	-
