Configuration label

Specifies options for labels displayed at the min and max values.

Type: Object

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div dx-slider="{
        min: 0,
        max: 100,
        value: 38,
        bindingOptions: {
            'label.visible': 'labelVisible'
        }
    }"></div>
    <div class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">Show label</div>
            <div class="dx-field-value" dx-switch="{
                bindingOptions: {
                    value: 'labelVisible'
                }
            }"></div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.labelVisible = false;
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
.dx-slider{
    margin: 10px;
}
<div data-bind="dxSlider: {
    min: 0,
    max: 100,
    value: 38,
    label: {
        visible: labelVisible
    }
}"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">Show label</div>
        <div class="dx-field-value" data-bind="dxSwitch: { value: labelVisible }"></div>
    </div>
</div>
var myViewModel = {
    labelVisible: ko.observable(false)
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
.dx-slider{
    margin: 10px;
}
<div id="mySlider"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">Show label</div>
        <div class="dx-field-value" id="labelSelector"></div>
    </div>
</div>
$("#mySlider").dxSlider({
    min: 0,
    max: 100,
    value: 38,
    label: {
        visible: false
    }
});
$("#labelSelector").dxSwitch({
    value: false,
    onValueChanged: function (e) {
        $("#mySlider").dxSlider("instance").option("label.visible", e.value);
    }
})
body{
    text-align: center;
}
.dx-slider{
    margin: 10px;
}

format

Specifies a format for labels.

Type: String|function
Default Value: function(value) { return value }

A function passed to this option should take on a numeric value and return a formatted value. For instance, you can add a "$" sign before a value. In this case, the function passed to the format option should look like the following.

JavaScript
function(value) {
    return "$" + value;
}

You can also pass a string satisfying Globalize format patterns to the format option.

NOTE: If you set this option to 'currency', labels will be formatted according to the settings specified for the current culture in the globalize library. To provide a custom 'currency' format, assign a function to this option.

position

Specifies whether labels are located over or under the scale.

Type: String
Default Value: 'bottom'
Accepted Values: 'top'|'bottom'

visible

Specifies whether or not slider labels are visible.

Type: Boolean
Default Value: false