JSFiddle - React, Tailwind, and code Playground

by dkamburov

HTML

<script src="https://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>

<div id="radialgauge"></div>
    
    <div style="clear: both;"></div>
    
    

    <fieldset id="gauageOptions">
        <legend>Options</legend>
        <table>
            <tr>
                <td style="padding-right: 3px;">Choose a setting</td>
                <td>
                    <select id="gaugeSettings">
                        <option value="setting1" selected="selected">Setting One</option>
                        <option value="setting2">Setting Two</option>
                        <option value="setting3">Setting Three</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td style="padding-right: 5px;">Transition Duration</td>
                <td style="width: 90px">
                    <div id="transitionDurationSlider" style="width: 75px; display: inline-block;"></div>
						  <label id="transitionDurationLabel" style="margin: 3px 0px 0px 3px; position: absolute; display: inline-block;">2</label>
                </td>
            </tr>
        </table>
    </fieldset>

JavaScript

$(function () {
            
            $("#radialgauge").igRadialGauge({
                width: "100%",
                height: "500px",
                transitionDuration: "1500"
            });
            
            $("#radialgauge").igRadialGauge("destroy");

            function ChangeSelection(setting) {                
                if (setting == "setting1")
                    setting1();
                else if (setting == "setting2")
                    setting2();
                else if (setting == "setting3")
                    setting3();
            }

            $("#gaugeSettings").change(function (e) {
                var setting = $(this).val();
                ChangeSelection(setting);
            });

            //Apply the setting on initial load
            var setting = $("#gaugeSettings").val();
            ChangeSelection(setting);

            function setting1 () {
                    $("#radialgauge").igRadialGauge({
                    height: "350px",
                    width: "100%",
                    minimumValue: "0",
                    maximumValue: "100",
                    value: "0",
                    
                    //Scale Settings
                    scaleStartAngle: "135",
                    scaleEndAngle: "45",
                    scaleBrush: "rgba(68, 172, 214, 1)",

                    //Backing Settings
                    backingShape: "fitted",
                    backingOutline: "rgba(168, 168, 168, 1)",
                    backingBrush: "rgba(236, 237, 239, 1)",
                    
                    //Needle Settings
                        needleShape: "needle",
                    needlePivotShape: "circleOverlay",
                    needleEndExtent: "0.55",
                    needlePointFeatureExtent: "0.3",
                    needlePivotWidthRatio: "0.2",

                    //TickMark Settings
                    tickBrush: "rgba(51, 51, 51, 1)",
                   ...