Kt SliderVert

A vertical range slider with independent track and elapsed colors, fill/outline thumb modes, and thick/thin border styles.

🟣 PREMIUM

This component is only available in the Premium version of KimTools.

Get KimTools

kt-slider-vert-light kt-slider-vert-dark

🟢 DESIGNER SUPPORT

This control has full Visual Studio design-time support.
Drag it from the Toolbox onto your form, customize its properties directly in the Properties window, and KimTools will generate the corresponding code for you.

Flat / Minimal Vertical Slider

A thin track with an outline thumb. The elapsed region is tinted below the thumb while the remaining track uses SliderColor. Compact and unobtrusive for side-panel layouts.

🔴 🟡 🟢
var panel = new FlowLayoutPanel
{
    Width = 120,
    Height = 280,
    Padding = new Padding(20),
    BackColor = Color.Transparent,
    AutoScroll = false,
    FlowDirection = FlowDirection.LeftToRight
};
	
var slider = new KtSliderVert
{
    Width = 31,
    Height = 200,
    Margin = new Padding(10),
    Value = 40,
    SliderColor = KtColor.BASE_3,
    ElapsedColor = KtColor.PRIMARY,
    ThumbColor = KtColor.PRIMARY,
    ThumbFillColor = KtColor.PRIMARY,
    ThumbStyle = KtSliderVert.ThumbStyles.Outline,
    SliderStyle = KtSliderVert.SliderStyles.Thin,
};
	
panel.Controls.Add(slider);
Auto
Light
Dark

slider-vert-flat-light slider-vert-flat-dark

slider-vert-flat-light

slider-vert-flat-dark

Fill Thumb (ThumbStyle)

Switch to ThumbStyle.Fill for a solid thumb without an outline border. Pairs cleanly with thin tracks for a modern, minimal volume or level control.

🔴 🟡 🟢
var panel = new FlowLayoutPanel
{
    Width = 120,
    Height = 280,
    Padding = new Padding(20),
    BackColor = Color.Transparent,
    AutoScroll = false,
    FlowDirection = FlowDirection.LeftToRight
};
	
var slider = new KtSliderVert
{
    Width = 31,
    Height = 200,
    Margin = new Padding(10),
    Value = 70,
    SliderColor = KtColor.BASE_3,
    ElapsedColor = KtColor.SUCCESS,
    ThumbColor = KtColor.SUCCESS,
    ThumbFillColor = KtColor.SUCCESS,
    ThumbStyle = KtSliderVert.ThumbStyles.Fill,
    SliderStyle = KtSliderVert.SliderStyles.Thin,
};
	
panel.Controls.Add(slider);
Auto
Light
Dark

slider-vert-fill-light slider-vert-fill-dark

slider-vert-fill-light

slider-vert-fill-dark

Thick Track (SliderStyle)

SliderStyle.Thick increases the track weight and gives the thumb more room. Useful for touch-friendly interfaces or when the slider needs stronger visual presence.

🔴 🟡 🟢
var panel = new FlowLayoutPanel
{
    Width = 140,
    Height = 280,
    Padding = new Padding(20),
    BackColor = Color.Transparent,
    AutoScroll = false,
    FlowDirection = FlowDirection.LeftToRight
};
	
var slider = new KtSliderVert
{
    Width = 40,
    Height = 200,
    Margin = new Padding(10),
    Value = 55,
    SliderColor = KtColor.BASE_3,
    ElapsedColor = KtColor.INFO,
    ThumbColor = KtColor.INFO,
    ThumbFillColor = KtColor.INFO,
    ThumbStyle = KtSliderVert.ThumbStyles.Fill,
    SliderStyle = KtSliderVert.SliderStyles.Thick,
};
	
panel.Controls.Add(slider);
Auto
Light
Dark

slider-vert-thick-light slider-vert-thick-dark

slider-vert-thick-light

slider-vert-thick-dark

Color Themes (ElapsedColor, ThumbColor)

Swap the entire slider accent by changing ElapsedColor and ThumbColor together. Each slider paints its elapsed region from the thumb down, making value differences immediately visible.

🔴 🟡 🟢
var panel = new FlowLayoutPanel
{
    Width = 320,
    Height = 280,
    Padding = new Padding(20),
    BackColor = Color.Transparent,
    AutoScroll = false,
    FlowDirection = FlowDirection.LeftToRight
};
	
var primary = new KtSliderVert
{
    Width = 31,
    Height = 200,
    Margin = new Padding(10),
    Value = 25,
    SliderColor = KtColor.BASE_3,
    ElapsedColor = KtColor.PRIMARY,
    ThumbColor = KtColor.PRIMARY,
    ThumbFillColor = KtColor.PRIMARY,
    ThumbStyle = KtSliderVert.ThumbStyles.Outline,
    SliderStyle = KtSliderVert.SliderStyles.Thin,
};
	
var rose = new KtSliderVert
{
    Width = 31,
    Height = 200,
    Margin = new Padding(10),
    Value = 50,
    SliderColor = KtColor.BASE_3,
    ElapsedColor = KtColor.Rose,
    ThumbColor = KtColor.Rose,
    ThumbFillColor = KtColor.Rose,
    ThumbStyle = KtSliderVert.ThumbStyles.Outline,
    SliderStyle = KtSliderVert.SliderStyles.Thin,
};
	
var emerald = new KtSliderVert
{
    Width = 31,
    Height = 200,
    Margin = new Padding(10),
    Value = 75,
    SliderColor = KtColor.BASE_3,
    ElapsedColor = KtColor.Emerald,
    ThumbColor = KtColor.Emerald,
    ThumbFillColor = KtColor.Emerald,
    ThumbStyle = KtSliderVert.ThumbStyles.Outline,
    SliderStyle = KtSliderVert.SliderStyles.Thin,
};
	
panel.Controls.Add(primary);
panel.Controls.Add(rose);
panel.Controls.Add(emerald);
Auto
Light
Dark

slider-vert-themed-light slider-vert-themed-dark

slider-vert-themed-light

slider-vert-themed-dark

Disabled State

When Enabled = false, the slider falls back to muted state colors. All interactive feedback is suppressed, and the thumb and track are desaturated for clear non-interactive signaling.

🔴 🟡 🟢
var panel = new FlowLayoutPanel
{
    Width = 120,
    Height = 280,
    Padding = new Padding(20),
    BackColor = Color.Transparent,
    AutoScroll = false,
    FlowDirection = FlowDirection.LeftToRight
};
	
var slider = new KtSliderVert
{
    Width = 31,
    Height = 200,
    Margin = new Padding(10),
    Value = 50,
    Enabled = false,
    SliderColor = KtColor.CONTENT % 50,
    ElapsedColor = KtColor.CONTENT % 50,
    ThumbColor = KtColor.CONTENT % 50,
    ThumbFillColor = KtColor.CONTENT % 50,
    ThumbStyle = KtSliderVert.ThumbStyles.Outline,
    SliderStyle = KtSliderVert.SliderStyles.Thin,
};
	
panel.Controls.Add(slider);
Auto
Light
Dark

slider-vert-disabled-light slider-vert-disabled-dark

slider-vert-disabled-light

slider-vert-disabled-dark

API Reference
SliderColor Kt-Color Sets the slider’s BackColor.
ElapsedColor Kt-Color Sets the slider’s elapsed region color.
ThumbFillColor Kt-Color Sets the thumb’s inner fill color. This is only necessary when the property ThumbStyle’ is set to ‘Outline’.
SliderStyle SliderStyles Sets the slider’s overral style.
ThumbStyle ThumbStyles Sets the slider’s thumb style.
Previous Kt • Slider Next Kt • Spinner