JavaScript/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