RangeSlider

ic.RangeSlider is a dual-thumb slider that lets the user select a numeric range by dragging two thumbs along a track. It shares the same visual language as ic.Slider (fader grip lines, tick marks, value labels) but produces a low/high pair instead of a single value. The filled region between the thumbs clearly communicates the selected interval.

Appearance

Variant sets the accent color for the fill and both thumbs. 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 evokes a mixing console channel strip.

Range and step

Min and Max define the slider bounds, and Step controls the snap increment. Both thumbs always snap to the nearest step value during drag and keyboard interaction. The low thumb cannot cross above the high thumb, and vice versa. Fractional steps work as expected: a step of 0.1 gives one decimal place of precision.

Value label

When ShowValue is true, each thumb displays its current value as a text label. LabelPosition controls where labels appear: top and bottom produce floating tooltips anchored to each thumb (visible on hover and during drag), while side places persistent readouts on either side of 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

RangeSlider fires LowChanging and HighChanging continuously while the user drags the respective thumb or presses arrow keys. Each event carries the current value of that thumb in the payload. In MATLAB, attach listeners 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 temperature gauge with a gradient fill and blocky white thumbs with colored outlines. The selectors target .ic-range-slider__track, .ic-range-slider__fill, .ic-range-slider__thumb, and .ic-range-slider__tick.

rs = ic.RangeSlider("Min", 0, "Max", 100, ...
    "Low", 20, "High", 75, "Thumb", "square", ...
    "Size", "lg", "ShowTicks", true, "TickInterval", 10);

rs.css.style(".ic-range-slider__track", ...
    "background_color", "#eff6ff", ...
    "box_shadow", "inset 0 1px 3px rgba(0,0,0,0.1)", ...
    "border_radius", "2px");

rs.css.style(".ic-range-slider__fill", ...
    "background", "linear-gradient(90deg, #3b82f6, #ef4444)", ...
    "opacity", "1", "border_radius", "2px");

rs.css.style(".ic-range-slider__thumb", ...
    "background", "#fff", ...
    "border", "2px solid #6366f1", ...
    "border_radius", "3px", ...
    "box_shadow", "0 1px 3px rgba(0,0,0,0.15)");

rs.css.style(".ic-range-slider__tick", ...
    "background", "#94a3b8", "opacity", "0.5");