Skip to main content

Slider

Basic​

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

Range​

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

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

Step​

Use step prop to control slider granularity.

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

Disabled​

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

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

Hint Message​

Use hint prop to display validation states.

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

Error Message​

Use error, and invalid props to display validation states.

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

Label with Asterisk​

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

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

Label Visibility​

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

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

Tick Type​

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


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

API​

Props​

NameTypeDefaultDescription
booleanfalseWhether the slider is disabled (non-interactive if true)
stringnullError message to display when invalid is true
stringnullInformational hint message (shown when no error is present)
booleanfalseMarks the slider as invalid; used to apply error styling
stringnullThe label text displayed above the slider
number100The maximum value the slider can take
number0The minimum value the slider can take
booleanfalseWhether the slider operates in range mode (true) or single value mode (false)
booleantrueWhether the bottom label/tick section should be visible
booleanfalseWhether to show a red asterisk next to the label (typically for required fields)
number1The 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], number0Current value of the slider. If range is true, it should be [min, max]

Events​

NameDescription
tkChangeEmitted when the slider value changes. Emits a number for single mode, or a [min, max] tuple for range mode.