form fields

<tc-slider>

Themed range input. Built on the native `<input type="range">` for free keyboard and touch behavior. Optional ticks, value label, suffix.

import "@ra9/tan-compose-kit/slider"

Props

Name	Type	Default	Description
`value`	`number`	`0`	Current value. Reflects to the `value` attribute.
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`step`	`number`	`1`	Step increment.
`disabled`	`boolean`	`false`	Greyed out and non-interactive.
`showValue`	`boolean`	`false`	Show the current value as a label.
`showTicks`	`boolean`	`false`	Draw a tick mark per step (skipped when step density exceeds 50 ticks).
`label`	`string`	`""`	Visible label above the slider.
`suffix`	`string`	`""`	Appended to the value label (e.g. `%`, `px`, ` items`).

Events

Event	Detail	When
`tc-input`	`{ value: number }`	Fires while the user is dragging or holding an arrow key.
`tc-change`	`{ value: number, previous: number }`	Fires once the user releases / commits the value.

CSS variables

Variable	Default	Description
`--tc-slider-track`	`var(--tc-color-rule, #ece5d3)`	Empty track color.
`--tc-slider-fill`	`var(--tc-color-accent, #a16939)`	Filled track color.
`--tc-slider-thumb`	`var(--tc-color-surface, #ffffff)`	Thumb fill.
`--tc-slider-thumb-ring`	`var(--tc-color-accent, #a16939)`	Thumb border.
`--tc-slider-track-size`	`6px`	Track height.
`--tc-slider-thumb-size`	`20px`	Thumb diameter.

Examples

Basic

<tc-slider value="40"></tc-slider>

With label and value

<tc-slider label="Volume" value="60" suffix="%" showValue></tc-slider>

Ticks

<tc-slider label="Rating" value="3" min="1" max="5" step="1" showTicks showValue></tc-slider>

Custom range and step

<tc-slider label="Font size" value="16" min="12" max="24" step="1" suffix="px" showValue></tc-slider> <tc-slider label="Temperature" value="0.7" min="0" max="2" step="0.1" showValue></tc-slider>

Disabled

<tc-slider disabled value="50"></tc-slider>

Listening for change

<tc-slider id="vol" label="Volume" suffix="%" value="40" showValue></tc-slider> <script> const s = document.getElementById("vol"); s.addEventListener("tc-input", (e) => { /* live preview */ }); s.addEventListener("tc-change", (e) => { console.log("committed:", e.detail.value); }); </script>

Accessibility

The underlying <input type="range"> provides full keyboard support out of the box: ← / → step, Page Up / Page Down larger jumps, Home / End for ends.
aria-valuetext carries the value with its suffix so screen readers announce "60 percent" rather than just "60".
The focus ring is built into the thumb with a color-mix halo — works on light and dark themes.

Theming

<tc-slider value="70" showValue suffix="%" style=" --tc-slider-track: #2a2f3a; --tc-slider-fill: #ffc857; --tc-slider-thumb: #14171f; --tc-slider-thumb-ring: #ffc857; " ></tc-slider>

← All components