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 RangeSlider - Customize Component Appearance

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

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

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

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

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

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

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

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

export default App;

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

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

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

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

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

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

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

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

export default App;

To specify whether or not the selected range should be highlighted, use the showRange property.

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

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

import { DxRangeSlider } from 'devextreme-vue/range-slider';

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

import { RangeSlider } from 'devextreme-react/range-slider';

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

export default App;
See Also