JSFiddle - React, Tailwind, and code Playground

by mowglisanu

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/black-tie/jquery-ui.css">
<div class="enunt">text here</div>
<div class="ans"><input type="text" id="amount1" style="border: 0; color: #f6931f; font-weight: bold;" /></div>
<div id="slider1" class="slide"></div>

<div class="enunt">text here</div>
<div class="ans"><input type="text" id="amount2" style="border: 0; color: #f6931f; font-weight: bold;" /></div>
<div id="slider2" class="slide"></div>

<div class="enunt">text here</div>
<div class="ans"><input type="text" id="amount3" style="border: 0; color: #f6931f; font-weight: bold;" /></div>
<div id="slider3" class="slide"></div>

<div class="enunt">text here</div>
<div class="ans"><input type="text" id="amount4" style="border: 0; color: #f6931f; font-weight: bold;" /></div>
<div id="slider4" class="slide"></div>

<div class="enunt">text here</div>
<div class="ans"><input type="text" id="amount5" style="border: 0; color: #f6931f; font-weight: bold;" /></div>
<div id="slider5" class="slide"></div>

JavaScript

function slider(i) {
                $( '#slider' + i ).slider({
                    value:4,
                    min: 1,
                    max: 7,
                    step: 1,
                    slide: function( event, ui ) {
                        $( '#amount' + i ).val( ui.value );
                    }
                });
                $( '#amount' + i ).val( $( '#slider' + i ).slider( "value" ) );
            }
for (var i=1; i<6; i++)
    slider(i);