JSFiddle - React, Tailwind, and code Playground

by Vivek Krishnan

HTML

<script src="http://yourjavascript.com/14831410408/jquery-linkedsliders.js"></script>
    <script type="text/javascript">
        $(function () {
            $('div.indicatorsLinked').slider().linkedSliders();

            $.linkedSliders.setDefaults({
                total: 100,
                policy: 'all'
            });
        });

        function lockOrUnlockIndicator(sliderId, checkBoxId) {
           var checkBoxStatus = $("#"+checkBoxId).prop('checked');

            if (checkBoxStatus) {
                $("#" + sliderId).slider("disable");
				var sliderValue = $("#" + sliderId).slider("value");
				 $("#txt_"+checkBoxId).val(sliderValue);
            } else {
                $("#" + sliderId).slider("enable");
            }

        }
    </script>
<table>
    <tr><td><div id="indicator01" name="indicator01" class="indicatorsLinked"></div></td><td><span style="padding-left: 15px">
	<input type="text" id="txt_indicatorCheckBox01" class="linkedValue" value=""/>
	<input type="checkbox" id="indicatorCheckBox01" name="indicatorCheckBox01" onclick="javascript: lockOrUnlockIndicator('indicator01', 'indicatorCheckBox01')">Lock</span></td></tr>
	
    <tr><td><div id="indicator02" name="indicator02" class="indicatorsLinked"></div></td><td><span style="padding-left: 15px">
	<input type="text" id="txt_indicatorCheckBox02" class="linkedValue" value=""/>
	<input type="checkbox" id="indicatorCheckBox02" name="indicatorCheckBox02" onclick="javascript: lockOrUnlockIndicator('indicator02', 'indicatorCheckBox02')">Lock</span></td></tr>
    
	<tr><td><div id="indicator03" name="indicator03" class="indicatorsLinked"></div></td><td><span style="padding-left: 15px">
	<input type="text" id="txt_indicatorCheckBox03" class="linkedValue" value=""/>
	<input type="checkbox" id="indicatorCheckBox03" name="indicatorCheckBox03" onclick="javascript: lockOrUnlockIndicator('indicator03', 'indicatorCheckBox03')">Lock</span></td></tr>
</table>

CSS

.ui-slider-horizontal { width: 20em; margin: 0em 0em 1em 1em; }

JavaScript

$(function () {
            $('div.indicatorsLinked').slider().linkedSliders();

            $.linkedSliders.setDefaults({
                total: 100,
                policy: 'all'
            });
        });