DevExtreme React - Customize Widget Appearance
The Slider can display labels for the min and max values. To configure the labels, use the label object.
- <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>
The Slider can also display a tooltip for the slider handle. To configure it, use the tooltip object.
- <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>
To specify whether or not the part of the scale from the beginning to the slider handle should be highlighted, use the showRange option.
- <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>
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.