Slider - Lithesome

Preview

Code

<script lang="ts">
	import { Slider, SliderRange, SliderThumb, SliderValue } from 'lithesome';

	let value = $state<number>(20);
</script>

<Slider
	bind:value
	class="relative flex h-4 w-96 cursor-pointer items-center rounded-full bg-neutral-300 dark:bg-neutral-800"
	step={5}
>
	<SliderRange class={['h-full rounded-full bg-black dark:bg-white', 'w-(--slider-percentage)']} />
	<SliderThumb
		class={[
			'absolute size-6 cursor-pointer rounded-full border border-transparent bg-white shadow-md dark:border-black',
			'left-(--slider-percentage) -translate-x-1/2'
		]}
	/>
	<SliderValue />
</Slider>

<span class="site-value">{value}</span>

Basic Example

<script lang="ts">
	import { Slider, SliderRange, SliderThumb } from 'lithesome';

	let value = $state(20);
</script>

<Slider bind:value>
	<SliderRange />
	<SliderThumb />
</Slider>

API Reference

<Slider />

Property	Type	Description
`value`	number	The current value.
`min`	number	The minimum value.
`max`	number	The maximum value.
`step`	number	The steps between the `min` and `max` props.
`orientation`	'horizontal' \| 'vertical'	The direction in which the slider will be used.
`reverse`	boolean	Reverse the logic of the `orientation`.
`disabled`	boolean	Disables the entire group, stops all events from firing.
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`value`	number	The current value.
`percentage`	number	The current percentage from 0 to 100.

<SliderThumb />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`value`	number	The current value.
`percentage`	number	The current percentage from 0 to 100.

<SliderRange />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`value`	number	The current value.
`percentage`	number	The current percentage from 0 to 100.

<SliderValue />

Property	Type	Description
`ref`	E	The reference to the underlying element.