$(function() {
    $("#linearGauge").dxLinearGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "rangeBar",
            // The rest of the indicator properties go here
        }
    });
});

<dx-linear-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="rangeBar"          
        <!-- The rest of the indicator properties go here -->
    ></dxo-value-indicator>
<dx-linear-gauge>

import { DxLinearGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxLinearGaugeModule
    ],
    // ...
})

<template>
    <DxLinearGauge :value="40">
        <DxValueIndicator <!-- or DxSubvalueIndicator -->
            type="rangeBar"
            <!-- The rest of the indicator properties go here -->
        /> 
    </DxLinearGauge>
</template>

<script>
import DxLinearGauge, {
    DxValueIndicator
} from 'devextreme-vue/linear-gauge';

export default {
    components: {
        DxLinearGauge,
        DxValueIndicator
    }
}
</script>

import React from 'react';

import LinearGauge, {
    ValueIndicator
} from 'devextreme-react/linear-gauge';

class App extends React.Component {
    render() {
        return (
            <LinearGauge value={40}>
                <ValueIndicator {/* or SubvalueIndicator */}                        
                    type="rangeBar"
                    {/* The rest of the indicator properties go here */}
                />
            </LinearGauge>
        );
    }
}
export default App;

@(Html.DevExtreme().LinearGauge()
    .ID("linearGauge")
    .Value(40)
    .ValueIndicator(vi => vi // or .SubvalueIndicator
        .Type(GaugeIndicatorType.RangeBar)
        // The rest of the indicator properties go here
    )
)

View Demo

This property supports the following colors:

• Hexadecimal colors
• RGB colors
• RGBA colors
• Predefined/cross-browser color names
• Predefined SVG colors
• Paint server address

By default, a range bar starts from the beginning of the gauge scale. If you need to draw the range bar starting from a specific scale value, assign the required value to the baseValue property. In this instance, the range bar will display the range from the baseValue to the main gauge value.

View Demo

This property supports the following colors:

• Hexadecimal colors
• RGB colors
• RGBA colors
• Predefined/cross-browser color names
• Predefined SVG colors
• Paint server address

This property specifies the orientation of the indicator relative to an invisible scale line.

Use the HorizontalEdge enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Left and Right.

CircularGauge Demo View Demo

This property accepts either the name of a predefined palette or an array of colors. The array can include the following colors:

• Hexadecimal colors
• RGB colors
• RGBA colors
• Predefined/cross-browser color names
• Predefined SVG colors

Use the VizPalette enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Default, SoftPastel, HarmonyLight, Pastel, Bright, Soft, Ocean, Vintage, Violet, Carmine, DarkMoon, SoftBlue, DarkViolet, and GreenMist.

Note that the indent property of the text configuration object must not be set to 0 if you need to show the text.

This property specifies the orientation of an indicator relative to an invisible scale line.

Use the VerticalEdge enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Top and Bottom.