Vue RangeSelector - sliderMarker

Defines the options of the range selector slider markers.

Type:

Object

When moving a slider, its marker displays the currently selected scale value. Use the sliderMarker object to set the required options for the range selector slider markers. For instance, you can format the markers' text, change the text font, or make the markers invisible.

View Demo

color

Specifies the color of the slider markers.

Type:

String

Default Value: '#9B9B9B'

This option supports the following colors:

To set a custom color for the font used to display the slider markers' text, use the color property.

customizeText

Specifies a callback function that returns the text to be displayed by slider markers.

Type:

Function

Function parameters:
scaleValue:

Object

Information on the scale value.

Object structure:
Name Type Description
value

Date

|

Number

The raw value.
valueText

String

The formatted value converted to a string.
Return Value:

String

The text for the slider marker to display.

Cannot be used in themes.

NOTE
As an alternative to the function’s parameter you can use the this keyword.

View Demo

font

Specifies font options for the text displayed by the range selector slider markers.

Type:

Object

format

Formats a value before it is displayed in a slider marker.

Type:

Format

Default Value: undefined

See the format section for details on accepted values.

View Demo

See Also

invalidRangeColor

Specifies the color used for the slider marker text when the currently selected range does not match the minRange and maxRange values.

Type:

String

Default Value: 'red'

padding Deprecated

Use the paddingTopBottom and paddingLeftRight options instead.

Specifies the empty space between the marker's border and the marker’s text.

Type:

Number

Default Value: 6

paddingLeftRight

Specifies the empty space between the marker's left and right borders and the marker's text.

Type:

Number

Default Value: 4

paddingTopBottom

Specifies the empty space between the marker's top and bottom borders and the marker's text.

Type:

Number

Default Value: 2

placeholderHeight

Specifies the placeholder height of the slider marker.

Type:

Number

Default Value: undefined
Cannot be used in themes.

placeholderSize Deprecated

Use the placeholderHeight and indent options instead.

Specifies in pixels the height and width of the space reserved for the range selector slider markers.

Type:

Number

|

Object

Default Value: undefined

You can set a numeric value to this property. This value will be used as a width and height of both the left and right slider markers. You can also set individual values for a width and height, and make them similar or different for the left and right slider markers. To do this, specify placeholderSize as an object. When setting this object's properties, take into account the font size of the text displayed in the slider markers.

You may need to set this property, when you need to know the exact size of the RangeSelector widget elements in vertical and horizontal directions. For instance, this may be required when displaying an image in the background in a stretched mode. To get the background height, subtract the scale's placeholder height and the slider markers' placeholder height from the RangeSelector's height. To get the background width, subtract the placeholder widths of slider markers from the RangeSelector's width.

precision Deprecated

Use the sliderMarker.format.precision option instead.

Specifies a precision for the formatted value displayed in slider markers.

Type:

Number

Default Value: undefined

visible

Indicates whether or not the slider markers are visible.

Type:

Boolean

Default Value: true