Vue RangeSlider - Customize Component Appearance

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

  • <template>
  • <DxRangeSlider ... >
  • <DxLabel
  • :visible="true"
  • :format="format"
  • position="bottom" /> <!-- or "top" -->
  • </DxRangeSlider>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • 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>

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

  • <template>
  • <DxRangeSlider ... >
  • <DxTooltip
  • :enabled="true"
  • position="bottom"
  • :format="format"
  • show-mode="always" /> <!-- or "onHover" -->
  • </DxRangeSlider>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • 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>

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

  • <template>
  • <DxRangeSlider :show-range="false"/>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxRangeSlider } from 'devextreme-vue/range-slider';
  •  
  • export default {
  • components: {
  • DxRangeSlider
  • }
  • }
  • </script>
See Also