Skip to content

Slider

Range input with styled thumb, label, and optional live value readout.

Usage

html
<tx-slider label="Volume" show-value value="65"></tx-slider>
<tx-slider label="Brightness" show-value value="80" min="0" max="100"></tx-slider>

Properties

PropertyTypeDefaultDescription
valuenumber50Current value
minnumber0Minimum value
maxnumber100Maximum value
stepnumber1Step increment
labelstring''Label text
showValuebooleanfalseShow live value readout

Events

EventDetailDescription
tx-input{ value: number }Fires on drag/change

Live Demo