All docs
V19.2
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Customize Widget Appearance

The Slider can display labels for the min and max values. To configure the labels, use the label object.

jQuery
JavaScript
$(function(){
    $("#sliderContainer").dxSlider({
        // . . .
        label: {
            visible: true,
            format: function(value) {
                return value + " units";
            },
            position: "bottom" // or "top"
        }
    });
});
Angular
HTML
TypeScript
<dx-slider
    <dxo-label
        [visible]="true"
        [format]="format"
        position="bottom"> <!-- or "top" -->
    </dxo-label>
</dx-slider>
import { DxSliderModule } from "devextreme-angular";
// ...
export class AppComponent {
    format = function(value) {
        return value + " units";
    };
}
@NgModule({
    imports: [
        // ...
        DxSliderModule
    ],
    // ...
})
Vue
<template>
    <DxSlider>
        <DxLabel
            :visible="true"
            :format="format"
            position="bottom" /> <!-- or "top" -->
    </DxSlider>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxSlider, DxLabel } from 'devextreme-vue/slider';

export default {
    components: {
        DxSlider,
        DxLabel
    },
    methods: {
        format(value) {
            return value + " units";
        }
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Slider, Label } from 'devextreme-react/slider';

const format = function(value) {
    return value + " units";
}

class App extends React.Component {
    render() {
        return (
            <Slider>
                <Label
                    visible={true}
                    format={format}
                    position="bottom" /> {/* or "top" */}
            </Slider>
        );
    }
}

export default App;

The Slider can also display a tooltip for the slider handle. To configure it, use the tooltip object.

jQuery
JavaScript
$(function(){
    $("#sliderContainer").dxSlider({
        // . . .
        tooltip: {
            enabled: true,
            position: "bottom",
            format: function(value) {
                return value + " units";
            },
            showMode: "always" // or "onHover"
        }
    });
});
Angular
HTML
TypeScript
<dx-slider
    <dxo-tooltip
        [enabled]="true"
        [format]="format"
        position="bottom"
        showMode="always"> <!-- or "onHover" -->
    </dxo-tooltip>
</dx-slider>
import { DxSliderModule } from "devextreme-angular";
// ...
export class AppComponent {
    format = function(value) {
        return value + " units";
    };
}
@NgModule({
    imports: [
        // ...
        DxSliderModule
    ],
    // ...
})
Vue
<template>
    <DxSlider>
        <DxTooltip
            :enabled="true"
            position="bottom"
            :format="format"
            show-mode="always" /> <!-- or "onHover" -->
    </DxSlider>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxSlider, DxTooltip } from 'devextreme-vue/slider';

export default {
    components: {
        DxSlider,
        DxTooltip
    },
    methods: {
        format(value) {
            return value + " units";
        }
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Slider, Tooltip } from 'devextreme-react/slider';

const format = function(value) {
    return value + " units";
}

class App extends React.Component {
    render() {
        return (
            <Slider>
                <Tooltip
                    enabled={true}
                    position="bottom"
                    format={format}
                    showMode="always" /> {/* or "onHover" */}
            </Slider>
        );
    }
}

export default App;

To specify whether or not the part of the scale from the beginning to the slider handle should be highlighted, use the showRange option.

jQuery
JavaScript
$(function(){
    $("#sliderContainer").dxSlider({
        // . . .
        showRange: false
    });
});
Angular
HTML
TypeScript
<dx-slider
    [showRange]="false"
</dx-slider>
import { DxSliderModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSliderModule
    ],
    // ...
})
Vue
<template>
    <DxSlider
        :show-range="false"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxSlider } from 'devextreme-vue/slider';

export default {
    components: {
        DxSlider
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Slider } from 'devextreme-react/slider';

class App extends React.Component {
    render() {
        return (
            <Slider
                showRange={false}
            />
        );
    }
}

export default App;
See Also