Slider

<ts-slider> vv0.4.0

The ts-slider component.

Open in Storybook for interactive demos.

Preview

<ts-slider max="100" min="0" size="md"></ts-slider>

Property	Attribute	Type	Default	Description
`disabled`	`disabled`	`boolean`	`false`	Disables the slider.
`label`	`label`	`string \| undefined`	—	Accessible label.
`max`	`max`	`number`	`100`	Maximum value.
`min`	`min`	`number`	`0`	Minimum value.
`showValue`	`show-value`	`boolean`	`false`	Whether to display the current value.
`size`	`size`	`"lg" \| "md" \| "sm" \| "xl" \| "xs"`	`'md'`	The size of the slider.
`step`	`step`	`number`	`1`	Step increment.
`value`	`value`	`number`	`0`	Current slider value.

Event	Detail	Bubbles	Composed	Description
`tsChange`	`{ value: number; }`	Yes	Yes	Emitted when drag ends (value committed).
`tsInput`	`{ value: number; }`	Yes	Yes	Emitted continuously during drag.

Use ::part() to style internal elements:

Part	Description
`fill`	The filled portion of the track.
`label`	The value label.
`thumb`	The draggable thumb.
`track`	The slider track.

ts-slider::part(fill) {
  /* your custom styles */
}

<ts-slider max="100" min="0" size="md"></ts-slider>

import { TsSlider } from '@tessera-ui/react';

<TsSlider max="100" min="0"></TsSlider>