Slider

React

Vue

Angular

Basic

View Code

React

<TkSlider
  min={0}
  max={100}
  label="Basic Slider"
  value={30}
/>

Vue

<TkSlider
  :min="0"
  :max="100"
  label="Basic Slider"
  :value="30"
/>

Angular

<tk-slider
  [min]="0"
  [max]="100"
  label="Basic Slider"
  [value]="30">
</tk-slider>

Range

Use range={true} prop to enable dual-thumb slider.

View Code

React

<TkSlider
  range
  min={0}
  max={100}
  step={5}
  label="Range Slider"
  value={[20, 80]}
  onTkChange={(e) => setValue(e.detail)}
/>

Vue

<TkSlider
  :range="true"
  :min="0"
  :max="100"
  :step="5"
  label="Range Slider"
  :value="[20, 80]"
  @tkChange="(val) => update(val)"
/>

Angular

<tk-slider
  [range]="true"
  [min]="0"
  [max]="100"
  [step]="5"
  label="Range Slider"
  [value]="[20, 80]"
  (tkChange)="onChange($event)">
</tk-slider>

Step

Use step prop to control slider granularity.

View Code

React

<TkSlider 
  min={0} 
  max={100} 
  step={10} 
  label="Step Slider" 
  />

Vue

<TkSlider 
  :min="0" 
  :max="100" 
  :step="10" 
  label="Step Slider" 
  />

Angular

<tk-slider
  [min]="0"
  [max]="100"
  [step]="10"
  label="Step Slider">
</tk-slider>

Disabled

Use disabled={true} to make the slider non-interactive.

View Code

React

<TkSlider
  min={0}
  max={100}
  step={10}
  label="Disabled Slider"
  value={50}
  disabled
/>

Vue

<TkSlider
  :min="0"
  :max="100"
  :step="10"
  label="Disabled Slider"
  :value="50"
  :disabled="true"
/>

Angular

<tk-slider
  [min]="0"
  [max]="100"
  [step]="10"
  label="Disabled Slider"
  [value]="50"
  [disabled]="true">
</tk-slider>

Hint Message

Use hint prop to display validation states.

View Code

React

<TkSlider 
  label="Slider with Hint" 
  hint="This is a hint" 
  />

Vue

<TkSlider 
  label="Slider with Hint" 
  hint="This is a hint" 
  />

Angular

<tk-slider
  label="Slider with Hint"
  hint="This is a hint">
</tk-slider>

Error Message

Use error, and invalid props to display validation states.

View Code

React

<TkSlider 
  label="Slider with Error" 
  invalid={true} 
  error="Invalid value" />

Vue

<TkSlider 
  label="Slider with Error" 
  :invalid="true" 
  error="Invalid value" />

Angular

<tk-slider
  label="Slider with Error"
  [invalid]="true"
  error="Invalid value">
</tk-slider>

Label with Asterisk

Use label and showAsterisk={true} to mark required fields.

View Code

React

<TkSlider
  label="Required Slider"
  value={60}
  showAsterisk
/>

Vue

<TkSlider
  label="Required Slider"
  :value="60"
  :showAsterisk="true"
/>

Angular

<tk-slider
  label="Required Slider"
  [value]="60"
  [showAsterisk]="true">
</tk-slider>

Label Visibility

Use labelVisibility={false} to hide the top label text.

View Code

React

<TkSlider 
  value={30}
  label="Slider" 
  rangeVisibility={false} 
  />

Vue

<TkSlider 
  :value="30"  
  label="Slider" 
  :range-visibility="false" 
  />

Angular

<tk-slider
  label="Slider"
  [value]="30"
  [rangeVisibility]="false">
</tk-slider>

Tick Type

Use type="ticks" to show tick indicators instead of min/max labels.

View Code

React

<TkSlider
  min={0}
  max={100}
  step={10}
  label="Slider"
  type={ticks}
/>

Vue

<TkSlider 
  :min="0" 
  :max="100" 
  :step="10" 
  label="Slider" 
  :type="type" 
/>

Angular

<tk-slider
  [min]="0"
  [max]="100"
  [step]="10"
  label="Slider"
  type="ticks">
</tk-slider>

API

Props

Name	Type	Default	Description
	boolean	false	Whether the slider is disabled (non-interactive if true)
	string	null	Error message to display when invalid is true
	string	null	Informational hint message (shown when no error is present)
	boolean	false	Marks the slider as invalid; used to apply error styling
	string	null	The label text displayed above the slider
	number	100	The maximum value the slider can take
	number	0	The minimum value the slider can take
	boolean	false	Whether the slider operates in range mode (true) or single value mode (false)
	boolean	true	Whether the bottom label/tick section should be visible
	boolean	false	Whether to show a red asterisk next to the label (typically for required fields)
	number	1	The increment step for the slider value (e.g., step = 5 → 0, 5, 10, ...)
	"labels", "ticks"	'labels'	The type of visual indicator shown below the track. 'labels' shows min/max values, 'ticks' shows evenly spaced tick marks
	[number, number], number	0	Current value of the slider. If range is true, it should be [min, max]

Events

Name	Description
tkChange	Emitted when the slider value changes. Emits a number for single mode, or a [min, max] tuple for range mode.