Contineo Platform

Slider

A customizable slider component for selecting numeric values through an interactive sliding interface. Features customizable appearance, range controls, markers, labels, and badges. Supports both horizontal and vertical orientations, custom track styling, and precise value formatting.

Extends: fieldComponent

Fields

Name	Code	Data Type	Description
Minimum Value	`minValue`	text	Minimum value that can be selected on the slider
Maximum Value	`maxValue`	text	Maximum value that can be selected on the slider
Inner Minimum	`innerMin`	text	Minimum value for the inner range
Inner Maximum	`innerMax`	text	Maximum value for the inner range
Step	`stepValue`	text	The increment value for each step of the slider
Vertical	`isVertical`	boolean	Controls whether the slider is displayed vertically
Snap	`snap`	boolean	When enabled, slider value snaps to steps
Show Label	`showLabel`	boolean	Controls whether the value label is always visible
Label Format	`labelFormat`	text	Format pattern for displaying the slider value
Label Format Script	`labelFormatterFunction`	text	Custom JavaScript function for formatting the displayed value
Track Color	`trackColor`	text	Color of the slider track
Read Only	`readOnly`	boolean	When enabled, prevents user interaction with the slider
Inner Track Color	`innerTrackColor`	text	Color of the inner track section
Inner Track Image	`innerTrackImg`	text	Image URL for the inner track background
Track Size	`trackSize`	text	Width of the slider track
Color	`color`	text	Main color of the slider component
Selection Color	`selectionColor`	text	Color of the selected portion of the slider
Badge Color	`badgeColor`	text	Color of the value badge if shown
Track Image	`trackImg`	text	Image URL for the track background
Show Marker Labels	`showMarkerLabels`	boolean	Controls visibility of value markers on the track
Show Markers	`showMarkers`	boolean	Controls visibility of step markers on the track
Switch Label Props	`switchLabelProps`	boolean	Switches the side of the label display
Switch Marker Props	`switchMarkerProps`	boolean	Switches the side of the marker labels
Show Badge	`showBadge`	boolean	Controls visibility of the value badge
Label	`label`	multi-locale	Display label for the 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
Value	`value`	text	Current value of the slider
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
`onSliderChange`	Handles slider value changes and triggers change events with throttling

Events

Name	Description
`onChange`	Triggered when the slider value changes
`onBlur`	Triggered when the slider loses focus
`onFocus`	Triggered when the slider gains focus