Contineo Platform

Range Slider

A dual-handle slider component for selecting numeric ranges. Features customizable appearance with markers, labels, and track styling options. Supports both horizontal and vertical orientations with configurable minimum and maximum bounds. Ideal for filtering numeric ranges or setting upper and lower limits.

Extends: fieldComponent

Fields

Name	Code	Data Type	Description
Selected Minimum Value	`selectedMin`	text	Currently selected minimum value in the range
Selected Maximum Value	`selectedMax`	text	Currently selected maximum value in the range
Minimum Value	`minValue`	text	Lower bound of the possible range
Maximum Value	`maxValue`	text	Upper bound of the possible range
Step	`step`	text	The increment value for each step of the range slider
Vertical	`isVertical`	boolean	Controls whether the range slider is displayed vertically
Show Label	`showLabel`	boolean	Controls whether the value labels are always visible
Label Format	`labelFormat`	text	Format pattern for displaying the range values
Color	`color`	text	Main color of the range slider component
Track Color	`trackColor`	text	Color of the slider track
Selection Color	`selectionColor`	text	Color of the selected portion of the range
Track Size	`trackSize`	text	Width of the slider track
Show Markers	`showMarkers`	boolean	Controls visibility of step markers on the track
Show Marker Labels	`showMarkerLabels`	boolean	Controls visibility of value markers on the track
Label	`label`	multi-locale	Display label for the range slider
ID	`resourceId`	text	Unique identifier for the component
Style Classes	`styleClasses`	text	CSS classes for styling
Style	`style`	text	Custom inline styles
Width	`widthClass`	text	Controls component width
Visible	`isVisible`	boolean	Controls component visibility
Enabled	`enabled`	boolean	Controls whether component is enabled
Field Style	`fieldStyle`	text	Additional field styling options

Methods

Name	Description
`onRangeSliderChange`	Handles range value changes and triggers change events
`addDefaultMapping`	Sets up default data mappings for range values

Events

Name	Description
`onChange`	Triggered when either range handle is moved
`onBlur`	Triggered when the range slider loses focus
`onFocus`	Triggered when the range slider gains focus