Slider

ic.Slider is a numeric input that lets the user pick a value by dragging a thumb along a track. It supports horizontal and vertical orientations, three thumb styles (fader, circle, square), graduation tick marks, and a floating value label. The fader thumb with grip lines follows the Industrial Flat design language, giving the control a tactile, hardware-mixer feel.

Appearance

Variant sets the accent color for the fill and thumb. Size scales the track thickness and thumb dimensions together. Thumb switches between three styles: fader (rectangular with grip lines, the default), circle, and square. The fader style is the most distinctive, evoking a mixing console channel strip.

Range and step

Min and Max define the slider bounds, and Step controls the snap increment. The thumb always snaps to the nearest step value, both during drag and keyboard interaction. Fractional steps work as expected: a step of 0.1 gives one decimal place of precision.

Value label

When ShowValue is true, the slider displays the current value as a text label. LabelPosition controls where it appears: top and bottom produce a floating tooltip anchored to the thumb (visible on hover and during drag), while left and right place a persistent readout beside the track with a fixed width so the layout does not shift as digits change.

Tick marks

ShowTicks renders graduation marks below the track (or beside it when vertical). By default, ticks align with the Step increment. Set TickInterval to a custom spacing if you want fewer marks, for example every 10 units on a 0-100 range with step 1. The component caps at 200 ticks to avoid performance issues.

Vertical orientation

Setting Orientation to "vertical" rotates the slider so the minimum is at the bottom and the maximum at the top. The fader thumb dimensions swap automatically. Give the container a fixed height since the slider fills 100% of its parent in vertical mode.

Events

Slider fires ValueChanging continuously while the user drags or presses arrow keys, carrying the current value in the payload. This is useful for live previews. In MATLAB, attach a listener with addlistener and read the value from evt.Data.value.

Custom styling

Every component exposes a .css property that lets you inject instance-level CSS directly from MATLAB. This example creates a candy-themed slider.

s = ic.Slider("Min", 0, "Max", 100, "Value", 60, ...
    "Variant", "primary", "Thumb", "circle", "Size", "lg");

s.css.style(".ic-slider__track", ...
    "background_color", "#fce4ec", ...
    "box_shadow", "inset 0 1px 3px rgba(0,0,0,0.08)", ...
    "border_radius", "8px", ...
    "height", "8px");

s.css.style(".ic-slider__fill", ...
    "background", "linear-gradient(90deg, #f06292, #ab47bc)", ...
    "border_radius", "8px", ...
    "opacity", "1");

s.css.style(".ic-slider__thumb", ...
    "width", "24px", ...
    "height", "24px", ...
    "border_radius", "50%", ...
    "background", "white", ...
    "border", "3px solid #e91e90", ...
    "box_shadow", "0 2px 6px rgba(233,30,144,0.3)");