JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/south-street/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<table cellspacing=10>
<tr>
        <td>Показатель х</td>
        <td width=150><div id="sliderx" ></div></td><td><input id="sliderx-result"></td>
        </tr>
<tr>
        <td>Показатель y</td>
        <td width=150><div id="slidery" ></div></td><td><input id="slidery-result"></td>
        </tr>
<tr>
        <td>Показатель z</td>
        <td width=150><div id="sliderz" ></div></td><td><input id="sliderz-result"></td>
        </tr>
</table>

JavaScript

$(function() {
var  x = document.getElementById("sliderx-result"),
          y = document.getElementById("slidery-result"),
          z = document.getElementById("sliderz-result");
$.each({
    'sliderx': {
      min: 0,
      max: 100,
      value: 50
    },
    'slidery': {
      min: 0,
      max: 100,
      value: 50
    },
    'sliderz': {
      min: 0,
      max: 100,
      value: 50
    }
},
function(id, params) {
    $('#'+ id).slider(params).on({
      'slide': function(event, ui) {
        event.data.val(ui.value);
      },
      'slidechange': function(event, ui) { /*console.log(event.data.val());*/

         var itogx = x.value,
         itogy = y.value,
         itogz = z.value; //надо чтобы вот эти переменные
      }
    }, 
    $('#'+ id + '-result'));
  });
//были доступны здесь

console.log(itogx);
console.log(itogy);
console.log(itogz);
});