JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<div id="linearGauge"></div>

    
    
    <fieldset id="graphOptions" style="margin-top: 30px">
        <legend>オプション</legend>
        <table>
            <tr>
                <td>設定の選択</td>
                <td>
                    <select id="graphSettings">
                        <option value="setting1();" selected="selected">設定 1</option>
                        <option value="setting2();">設定 2</option>
                        <option value="setting3();">設定 3</option>
                    </select>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>トランジション期間</td>
                <td>
                    <div id="transitionDurationSlider" style="width: 100px; margin: 12px 40px 12px 12px"></div>
                </td>
                <td>
                    <label id="transitionDurationLabel">1000</label>
                </td>
            </tr>
        </table>
    </fieldset>

JavaScript

$(function () { 
            var $linearGauge = $("#linearGauge");

            $linearGauge.igLinearGauge({
                width: "100%",
                height: "90px",
                targetValueOutline: "transparent",
                valueOutline: "transparent",
                transitionDuration: 1000
            });

            function setting1() {
                $linearGauge.igLinearGauge({
                    targetValue: 160,
                    value: 180,
                    interval: 40,
                    minimumValue: 0,
                    maximumValue: 200,
                    targetValueBrush: "white",
                    valueBrush: "white", 
                });

                $linearGauge.igLinearGauge("option", "ranges", [{ name: "range1", remove: true }]);
                $linearGauge.igLinearGauge("option", "ranges", [{ name: "range2", remove: true }]);
                $linearGauge.igLinearGauge("option", "ranges", [{ name: "range3", remove: true }]);
                $linearGauge.igLinearGauge("option", "ranges", [{ name: "range4", remove: true }]);
                $linearGauge.igLinearGauge("option", "ranges", [{ name: "range5", remove: true }]);

                $linearGauge.igLinearGauge("option", "ranges", [
                    {
                        name: 'range1',
                        startValue: 0,
                        endValue: 50,
                        brush: "#C62D36",
                        outline: "#C62D36"
                    },
                    {
                        name: 'range2',
                        startValue: 50,
                        endValue: 150,
                        brush: "#FDBD48",
                        outline: "#FDBD48"
                    },
                    {
                        name: 'range3',
                        startValue: 150,
                        endValue: 200,
                        brush: "#48892D",
                        outline: "#48892D"
             ...