sliderMarker font

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

Type: Object

Show Example:
jQuery

In this example, several font options of the slider markers are changed.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin:0px auto"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: 0,
            endValue: 1
        },
        sliderMarker: {
            font: {
                color: 'chartreuse',
                weight: 700,
                size: 16
            }
        }
    });
});

color

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

Type: String
Default Value: 'white'

This option supports the following colors.

Show Example:
jQuery

In this example, the font color option of the slider markers is set to 'cornsilk'.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin:0px auto"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: 0,
            endValue: 1
        },
        sliderMarker: {
            font: {
                color: 'cornsilk'
            }
        }
    });
});

family

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

Type: String
Default Value: ''Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana'

For details on acceptable values, refer to the Font family article.

Show Example:
jQuery

In this example, the font family option of the slider markers is changed.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin:0px auto"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        background: { color: 'chocolate' },
        scale: {
            startValue: 0,
            endValue: 1
        },
        sliderMarker: {
            font: {
                family: 'Zapf-Chancery, cursive'
            }
        }
    });
});

opacity

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

Type: Number
Default Value: undefined

Show Example:
jQuery

In this example, the font opacity option of the slider markers is set to 1.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin:0px auto"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        background: { color: 'lightslategrey' },
        scale: {
            startValue: 0,
            endValue: 1
        },
        sliderMarker: {
            font: {
                opacity: 1
            }
        }
    });
});

size

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

Type: Number|String
Default Value: 14

For details on acceptable values, refer to the Font size article.

Show Example:
jQuery

In this example, the font size option of the slider markers is set to 16.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin:0px auto"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        background: { color: 'wheat' },
        scale: {
            startValue: 0,
            endValue: 1
        },
        sliderMarker: {
            font: {
                size: 16
            }
        }
    });
});

weight

Specifies a font weight for the text displayed by slider markers.

Type: Number
Default Value: 400

Show Example:
jQuery

In this example, the font weight of the slider markers is changed to 700.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin:0px auto"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        background: { color: 'darkseagreen' },
        scale: {
            startValue: 0,
            endValue: 1
        },
        sliderMarker: {
            font: {
                weight: 700
            }
        }
    });
});