Slider
- React
- Vue
- Angular
Basic​
- React
- Vue
- Angular
<TkSlider
min={0}
max={100}
label="Basic Slider"
value={30}
/>
<TkSlider
:min="0"
:max="100"
label="Basic Slider"
:value="30"
/>
<tk-slider
[min]="0"
[max]="100"
label="Basic Slider"
[value]="30">
</tk-slider>
Range​
Use range={true}
prop to enable dual-thumb slider.
- React
- Vue
- Angular
<TkSlider
range
min={0}
max={100}
step={5}
label="Range Slider"
value={[20, 80]}
onTkChange={(e) => setValue(e.detail)}
/>
<TkSlider
:range="true"
:min="0"
:max="100"
:step="5"
label="Range Slider"
:value="[20, 80]"
@tkChange="(val) => update(val)"
/>
<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.
- React
- Vue
- Angular
<TkSlider
min={0}
max={100}
step={10}
label="Step Slider"
/>
<TkSlider
:min="0"
:max="100"
:step="10"
label="Step Slider"
/>
<tk-slider
[min]="0"
[max]="100"
[step]="10"
label="Step Slider">
</tk-slider>
Disabled​
Use disabled={true}
to make the slider non-interactive.
- React
- Vue
- Angular
<TkSlider
min={0}
max={100}
step={10}
label="Disabled Slider"
value={50}
disabled
/>
<TkSlider
:min="0"
:max="100"
:step="10"
label="Disabled Slider"
:value="50"
:disabled="true"
/>
<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.
- React
- Vue
- Angular
<TkSlider
label="Slider with Hint"
hint="This is a hint"
/>
<TkSlider
label="Slider with Hint"
hint="This is a hint"
/>
<tk-slider
label="Slider with Hint"
hint="This is a hint">
</tk-slider>
Error Message​
Use error
, and invalid
props to display validation states.
- React
- Vue
- Angular
<TkSlider
label="Slider with Error"
invalid={true}
error="Invalid value" />
<TkSlider
label="Slider with Error"
:invalid="true"
error="Invalid value" />
<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.
- React
- Vue
- Angular
<TkSlider
label="Required Slider"
value={60}
showAsterisk
/>
<TkSlider
label="Required Slider"
:value="60"
:showAsterisk="true"
/>
<tk-slider
label="Required Slider"
[value]="60"
[showAsterisk]="true">
</tk-slider>
Label Visibility​
Use labelVisibility={false}
to hide the top label text.
- React
- Vue
- Angular
<TkSlider
value={30}
label="Slider"
rangeVisibility={false}
/>
<TkSlider
:value="30"
label="Slider"
:range-visibility="false"
/>
<tk-slider
label="Slider"
[value]="30"
[rangeVisibility]="false">
</tk-slider>
Tick Type​
Use type="ticks"
to show tick indicators instead of min/max labels.
- React
- Vue
- Angular
<TkSlider
min={0}
max={100}
step={10}
label="Slider"
type={ticks}
/>
<TkSlider
:min="0"
:max="100"
:step="10"
label="Slider"
:type="type"
/>
<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. |