<script src="<?=$board_skin_url?>/noUiSlider-14.1.1/distribute/nouislider.js"></script>
<link rel="stylesheet" href="<?=$board_skin_url?>/noUiSlider-14.1.1/distribute/nouislider.css">
   <?for($i=0;$i<=3;$i++){?>          
       <fieldset style='border:1px;'><p class='no-drag'><?=chr($i+97)?>상수</p>
    <div class="bo_w_tit write_div">
         <div id="slider-direction[<?=$i?>]"></div>
        <select id="input-select[<?=$i?>]"></select>
        <input type="button" id="write-button[<?=$i?>]" value="초기화">
        <input type="button" id="read-button[<?=$i?>]" value="현재값 출력">
        <input type="text"   id="field[<?=$i?>]" name="field[<?=$i?>]" class="field" style="border:0px;"readonly="" onfocus="this.blur();">
        <input type="number" id="input-number[<?=$i?>]" name="input_number[<?=$i?>]" min="-15" max="15" value="0" >
                <script>
// javascript
var directionSlider=new Array();
directionSlider[<?=$i?>] = document.getElementById('slider-direction[<?=$i?>]');
noUiSlider.create(directionSlider[<?=$i?>], {
    start: 0,
    step:0.01,
    connect: true,
    range: {
        'min':-15,
        'max':15
    }
});
// 0으로 초기화 하기
document.getElementById('write-button[<?=$i?>]').addEventListener('click', function () {
    directionSlider[<?=$i?>].noUiSlider.set(0);
});
// 정의한 값 alert창 띄우기
document.getElementById('read-button[<?=$i?>]').addEventListener('click', function () {
    alert(directionSlider[<?=$i?>].noUiSlider.get());
});
var num=new Array();
num[<?=$i?>] = directionSlider[<?=$i?>].noUiSlider.get();
// 현재 값 출력하기
var directionField=new Array();
var values = new Array();
directionField[<?=$i?>] = document.getElementById('field[<?=$i?>]');
directionSlider[<?=$i?>].noUiSlider.on('update', function (values, handle) {
     console.log(directionField[<?=$i?>]);
    directionField[<?=$i?>].innerHTML = values[handle][<?=$i?>];
    directionField[<?=$i?>].value=values[handle];
});
var select=new Array();
select[<?=$i?>] = document.getElementById('input-select[<?=$i?>]');
// 셀렉트 추가
for (var i = -15; i <= 15; i+=0.01) {
    var option=new Array();
    option[<?=$i?>] = document.createElement("option");
    option[<?=$i?>].text = i.toFixed(2);
    option[<?=$i?>].value = i.toFixed(2);
    if(option[<?=$i?>].value=="-0.00"){ option[<?=$i?>].value = "0.00";option[<?=$i?>].text ="0.00";}
    select[<?=$i?>].appendChild(option[<?=$i?>]);
}
var inputNumber=new Array();
inputNumber[<?=$i?>] = document.getElementById('input-number[<?=$i?>]');
//값 변동 기능 
directionSlider[<?=$i?>].noUiSlider.on('update', function (values, handle) {
    var value=new Array();
    value[<?=$i?>] = values[handle];
    if (handle) {
    } else {
        select[<?=$i?>].value = value[<?=$i?>];
        inputNumber[<?=$i?>].value = Math.round(value[<?=$i?>]);    
    }
});
select[<?=$i?>].addEventListener('change', function () {
    directionSlider[<?=$i?>].noUiSlider.set([this.value, null]);
});
inputNumber[<?=$i?>].addEventListener('change', function () {
    directionSlider[<?=$i?>].noUiSlider.set([this.value, null]);
});
</script>     
</div>
</fieldset>