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="radialgauge"></div>

    <div>
        <fieldset id="gaugeOptions">
            <legend>オプション</legend>
				<div class="optionContainer">
               内部の開始範囲
					<br />
               <div id="innerStartExtentSlider" class="sliderBounds"></div>
               <label id="innerStartExtentLabel">0.5</label>
				</div>
				<div class="optionContainer">
               内部の終了範囲
					<br />
               <div id="innerEndExtentSlider" class="sliderBounds"></div>
               <label id="innerEndExtentLabel">0.5</label>
				</div>
				<div class="optionContainer">
               外部の開始範囲
					<br />
               <div id="outerStartExtentSlider" class="sliderBounds"></div>
               <label id="outerStartExtentLabel">0.72</label>
				</div>
				<div class="optionContainer">
               外部の終了範囲
					<br />
               <div id="outerEndExtentSlider" class="sliderBounds"></div>
               <label id="outerEndExtentLabel">.78</label>
				</div>
				<div class="optionContainer">
               開始値
					<br />
               <div id="startValueSlider" class="sliderBounds"></div>
               <label id="startValueLabel">70</label>
				</div>
				<div class="optionContainer">
               終了値
               <div...

CSS

.sliderBounds {
    	   width: 95px;
    	   margin: 6px 3px 6px 6px;
			display: inline-block;
    	}
    	.optionContainer {
    	   width: 154px;
    	   margin: 2px;
			padding: 2px;
			display: inline-block;
			border: 1px solid #e0e0e0;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			border-radius: 4px;
    	}

JavaScript

$(function() {
            $("#radialgauge").igRadialGauge({
                height: "350px",
                width: "100%",
                transitionDuration: "1500",
                ranges: [{
                    name: "range1",
                    brush: "rgba(164, 189, 41, 1)",
                    startValue: "70",
                    endValue: "100",
                    outerStartExtent: "0.55",
                    outerEndExtent: "0.65"
                }]
            });


            // Inner Start Extent
            $("#innerStartExtentSlider").slider({
                min: 0,
                max: 1,
                step: 0.01,
                value: 0.5,
                slide: function (event, ui) {
                    $("#radialgauge").igRadialGauge("option", "ranges", [{ name: "range1", innerStartExtent: ui.value }]);
                    $("#innerStartExtentLabel").text(ui.value);
                }
            });

            // Inner End Extent
            $("#innerEndExtentSlider").slider({
                min: 0,
                max: 1,
                step: 0.01,
                value: 0.5,
                slide: function (event, ui) {
                    $("#radialgauge").igRadialGauge("option", "ranges", [{ name: "range1", innerEndExtent: ui.value }]);
                    $("#innerEndExtentLabel").text(ui.value);
                }
            });

            // Outer Start Extent
            $("#outerStartExtentSlider").slider({
                min: 0,
                max: 1,
                step: 0.01,
                value: 0.72,
                slide: function (event, ui) {
                    $("#radialgauge").igRadialGauge("option", "ranges", [{ name: "range1", outerStartExtent: ui.value }]);
                    $("#outerStartExtentLabel").text(ui.value);
                }
            });

            // Outer End Extent
            $("#outerEndExtentSlider").slider({
                min: 0,
                max: 1,
                step:...