All docs
V23.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

jQuery Slider - Customize Component 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.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.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.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.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 property.

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.light.css';

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

export default {
    components: {
        DxSlider
    }
}
</script>
React
import React from 'react';
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