Slider

<ts-slider> vv0.6.3

The ts-slider component.

Open in Storybook for interactive demos.

Preview

<ts-slider max="100" min="0" orientation="horizontal"></ts-slider>

Property	Attribute	Type	Default	Description
`disabled`	`disabled`	`boolean`	`false`	Disables the slider.
`label`	`label`	`string \| undefined`	—	Accessible label.
`marks`	`marks`	`string \| undefined`	—	JSON string of marks: [{“value”: 0, “label”: “0%”}, …]
`max`	`max`	`number`	`100`	Maximum value.
`min`	`min`	`number`	`0`	Minimum value.
`orientation`	`orientation`	`"horizontal" \| "vertical"`	`'horizontal'`	Orientation of the slider.
`range`	`range`	`boolean`	`false`	Whether to use range mode (dual thumbs).
`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 (single mode).
`valueHigh`	`value-high`	`number \| undefined`	—	High value for range mode.
`valueLow`	`value-low`	`number \| undefined`	—	Low value for range mode.

Event	Detail	Bubbles	Composed	Description
`tsChange`	`{ value: number; valueLow?: number	undefined; valueHigh?: number	undefined; }`	Yes
`tsInput`	`{ value: number; valueLow?: number	undefined; valueHigh?: number	undefined; }`	Yes

Use ::part() to style internal elements:

Part	Description
`fill`	The filled portion of the track.
`label`	The value label.
`marks`	The marks container.
`thumb`	The draggable thumb (single mode).
`thumb-high`	The high thumb (range mode).
`thumb-low`	The low thumb (range mode).
`track`	The slider track.

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

<ts-slider max="100" min="0" orientation="horizontal"></ts-slider>

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

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