Configuration 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

Show Example:
jQuery

In this example, several options of the sliderMarker configuration object are changed.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin:0px auto"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: 0,
            endValue: 1,
            minorTickInterval: 0.01
        },
        sliderMarker: {
            format: 'fixedPoint',
            precision: 2,
            color: 'dodgerblue',
            padding: 10
        }
    });
});

color

Specifies the color of the slider markers.

Type: String
Default Value: '#9B9B9B'

This option supports the following colors.

  • Hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • Predefined/cross-browser color names
  • Predefined SVG colors (not supported in Internet Explorer 8)

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

Show Example:
jQuery

In this example, the slider markers are colored in pink.

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

customizeText

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

Type: function(scaleValue)
Function parameters:
scaleValue: Object
Defines a scale value.
Object structure:
value: Date|Number
Specifies the scale value that is currently selected.
valueText: String
Specifies the currently selected scale value using an applied format, if the format and precision (optional) properties are specified.
Return Value: String
The text to be displayed by a slider marker.
Cannot be used in themes.

When implementing a callback function for this property, use the value displayed in a slider marker. This value can be accessed using the fields of the object that is passed as the function's parameter. Alternatively, you can use the this object within the function. This object has the same structure as the object passed as a parameter.

Show Example:
jQuery

In this example, the slider markers' text is customized using the customizeText option.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin:0px auto"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        background: { color: 'paleturquoise' },
        dataSource: [
            { carName: 'Volkswagen Golf Mk7', maxSpeed: 134 },
            { carName: 'Audi A3 Mk3', maxSpeed: 155 },
            { carName: 'Renault Logan', maxSpeed: 115 },
            { carName: 'Nissan Skyline GTR R35', maxSpeed: 193 },
            { carName: 'Toyota Camry XV50', maxSpeed: 155 }
        ],
        dataSourceField: 'maxSpeed',
        sliderMarker: {
            customizeText: function (value) {
                return value.value + 'mph';
            }
        }
    });
});

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
            }
        }
    });
});

format

Specifies a format for the text displayed in slider markers.

Type: String
Default Value: ''
Accepted Values: 'currency' | 'fixedPoint' | 'percent' | 'decimal' | 'exponential' | 'largeNumber' | 'thousands' | 'millions' | 'billions' | 'trillions' | 'longDate' | 'longTime' | 'monthAndDay' | 'monthAndYear' | 'quarterAndYear' | 'shortDate' | 'shortTime' | 'millisecond' | 'day' | 'month' | 'quarter' | 'year'

Slider markers display the boundaries of the currently selected range. You can apply formatting to the text displayed by the slider markers by using one of the available formats.

NOTE: You can set a precision for the slider marker text when the 'fixedPoint', 'exponential', 'currency' or 'percent' format is applied. Use the precision property to do this.

Show Example:
jQuery

In this example, the slider marker values are formatted in a 'fixedPoint' format with the precision of 2.

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

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'

Show Example:
jQuery

In this example, if you try to select a range less than 10 and greater than 20, the slider markers will be colored in 'darkred'.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin:0px auto"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: 0,
            endValue: 100,
            minRange: 10,
            maxRange: 20
        },
        selectedRange: {
            startValue: 60,
            endValue: 80
        },
        sliderMarker: {
            invalidRangeColor: 'darkred'
        }
    });
});

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

Show Example:
jQuery

In this example, the slider marker's padding option is set to 30.

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

paddingLeftRight

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

Type: Number
Default Value: 4

Show Example:
jQuery

Move the slider at the bottom to change the slider marker's paddingLeftRight value.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin: 0px auto"></div>

<div id="sliderContainer" style="height:60px;width:300px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Left and Right Padding: <div style="display: inline-block;" id="sliderValue">4</div>
    <div id="slider"></div>
</div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: 0,
            endValue: 1
        },
        sliderMarker: {
            paddingLeftRight: 4
        }
    });

    $("#slider").dxSlider({
        min: 0,
        value: 4,
        max: 20,
        onValueChanged: function (e) {
            $('#sliderValue').html(e.value);
            var rangeSelector = $('#rangeSelectorContainer').dxRangeSelector('instance');
            rangeSelector.option("sliderMarker.paddingLeftRight", e.value);
        }
    });
})

paddingTopBottom

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

Type: Number
Default Value: 2

Show Example:
jQuery

Move the slider at the bottom to change the slider marker's paddingTopBottom value.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin: 0px auto"></div>

<div id="sliderContainer" style="height:60px;width:300px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Top and Bottom Padding: <div style="display: inline-block;" id="sliderValue">2</div>
    <div id="slider"></div>
</div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: 0,
            endValue: 1
        },
        sliderMarker: {
            paddingTopBottom: 2
        }
    });

    $("#slider").dxSlider({
        min: 0,
        value: 2,
        max: 20,
        onValueChanged: function (e) {
            $('#sliderValue').html(e.value);
            var rangeSelector = $('#rangeSelectorContainer').dxRangeSelector('instance');
            rangeSelector.option("sliderMarker.paddingTopBottom", e.value);
        }
    });
})

placeholderHeight

Specifies the placeholder height of the slider marker.

Type: Number
Default Value: undefined
Cannot be used in themes.

Show Example:
jQuery

Consider two horizontally aligned range selectors with the different height of the slider markers. Due to this difference, the chart displayed on the background of both range selectors is scaled differently. To avoid inconsistent data presentation caused by the slider marker, set the marker's placeholderHeight option to the same value. Use the checkbox at the bottom of range selectors to do it.

<div id="rangeSelector1Container" style="width:49%; height:120px; margin-right:5px; display: inline-block"></div>
<div id="rangeSelector2Container" style="width:49%; height:120px; display: inline-block"></div>
<div style="text-align:center; display:block; width:30%;" id="checkBoxContainer"></div>
$(function () {
    var baseOptions = {
        dataSource: [
            { x: 10, y1: 0, y2: 10 },
            { x: 15, y1: 6, y2: 12 },
            { x: 20, y1: 8, y2: 15 },
            { x: 30, y1: 10, y2: 10 },
            { x: 50, y1: 16, y2: 5 },
            { x: 150, y1: 12, y2: 6 },
            { x: 180, y1: 8, y2: 10 }
        ],
        sliderMarker: {
            font: {
                size: 10
            }
        },
        chart: {
            commonSeriesSettings: {
                argumentField: 'x'
            },
            bottomIndent: 0,
            topIndent: 0,
            series: [
                { valueField: 'y1' },
                { valueField: 'y2' }
            ]
        }
    };

    $('#rangeSelector1Container').dxRangeSelector(baseOptions);
    $('#rangeSelector2Container').dxRangeSelector($.extend(true, {}, baseOptions, {
        sliderMarker: {
            font: {
                size: 30
            }
        }
    }));
    $("#checkBoxContainer").dxCheckBox({
        text: 'Equal slider marker placeholder height',
        value: false,
        onValueChanged: function (e) {
            var rangeSelector1 = $('#rangeSelector1Container').dxRangeSelector('instance');
            var rangeSelector2 = $('#rangeSelector2Container').dxRangeSelector('instance');
            rangeSelector1.option("sliderMarker.placeholderHeight", e.value ? 48 : undefined);
            rangeSelector2.option("sliderMarker.placeholderHeight", e.value ? 48 : undefined);
        }
    });
});

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 dxRangeSelector 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 dxRangeSelector's height. To get the background width, subtract the placeholder widths of slider markers from the dxRangeSelector's width.

precision

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

Type: Number

This property value must be an integer indicating the number of digits to show in the values displayed by slider markers. This property value is used when markers display values in one of the following numeric formats: 'fixedPoint', 'exponential', 'currency' or 'percent'. To learn how to set a format for slider marker values, refer to the format property description.

Show Example:
jQuery

In this example, the slider marker values are formatted in a 'fixedPoint' format with the precision of 2.

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

visible

Indicates whether or not the slider markers are visible.

Type: Boolean
Default Value: true

Show Example:
jQuery

Toggle the check box below to change the visibility of the slider markers.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin: 0px auto"></div>
<div id="checkboxContainer" style="height:40px;width:200px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px">
    <input type="checkbox" id="visibleMarkersCheckbox" checked> Show Slider Markers
</div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: 0,
            endValue: 1
        },
        sliderMarker: { visible: true }
    });

    $('#visibleMarkersCheckbox').change(function () {
        var rangeSelector = $("#rangeSelectorContainer").dxRangeSelector("instance");
        rangeSelector.option({
            sliderMarker: { visible: this.checked }
        });
    });
})