Slider

An input where the value is within a set range.

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

<Slider class="relative flex h-4 w-96 cursor-pointer items-center rounded-full bg-neutral-300 dark:bg-neutral-800">
	<SliderRange class="h-full rounded-full bg-black dark:bg-white" />
	<SliderThumb
		class="size-6 cursor-pointer rounded-full border border-transparent bg-white shadow-md dark:border-black"
	/>
</Slider>

Prop	Type	Description
`value`	`number` `Default: 50`	The current value of the slider.
`min`	`number` `Default: 0`	The minimum value of the slider.
`max`	`number` `Default: 100`	The maximum value of the slider.
`step`	`number` `Default: 1`	Each step between the minimum and maximum values.
`orientation`	`'horizontal' \| 'vertical'` `Default: 'horizontal'`	Defines the way the slider starts and ends.
`reverse`	`boolean` `Default: false`	Switches the slider the opposite direction.
`disabled`	`boolean` `Default: false`	Disables the slider.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Child prop	Type	Description
`value`	`number`
`percentage`	`number`	The overall progress of the slider.

Data attribute	Value	Description
`data-slider`	`''`	The base data attribute, can be used for styling.
`data-value`		The value of the slider.
`data-percentage`		The overall progress of the slider.
`data-reversed`	`true`	This is only applied if true.
`data-orientation`	`'horizontal' \| 'vertical'`

Event	Param & Return	Description
`onMousedown`	`(e: MouseEvent)` `void`
`onClick`	`(e: MouseEvent)` `void`

Data attribute	Value	Description
`data-sliderthumb`	`''`	The base data attribute, can be used for styling.

Event	Param & Return	Description
`onMousedown`	`(e: MouseEvent)` `void`
`onClick`	`(e: MouseEvent)` `void`

Data attribute	Value	Description
`data-sliderrange`	`''`	The base data attribute, can be used for styling.
`data-value`		The value of the slider.
`data-percentage`		The overall progress of the slider.
`data-reversed`	`true`	This is only applied if true.
`data-orientation`	`'horizontal' \| 'vertical'`

Data attribute	Value	Description
`data-slidervalue`	`''`	The base data attribute, can be used for styling.

Basic Example

<script>
	import { Slider, SliderThumb, SliderRange, SliderValue } from 'lithesome';
</script>

<Slider>
	<SliderRange />
	<SliderThumb />
	<SliderValue />
</Slider>