JSFiddle - React, Tailwind, and code Playground

by LuckyLuzz

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/12.1.0/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/12.1.0/nouislider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.min.js"></script>
<table class="table">
  <tr>
    <td colspan="2">
      <label for="led-result-brithness">Total intensity</label>
      <div id="led-result-brithness"></div>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <label for="led-2700k">2700k</label>
      <div id="led-2700k"></div>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <label for="led-6500k">6500k</label>
      <div id="led-6500k"></div>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <label for="led-red">RED</label>
      <div id="led-red"></div>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <label for="led-green">GREEN</label>
      <div id="led-green"></div>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <label for="led-blue">BLUE</label>
      <div id="led-blue"></div>
    </td>
  </tr>
</table>

CSS

.noUi-tooltip {
  display: none;
}

.noUi-active .noUi-tooltip {
  display: block;
}

.withpip {
  margin-bottom: 30px
}

.noUi-horizontal {
  width: 400px
}

JavaScript

var led_result_brithness = document.getElementById('led-result-brithness');
noUiSlider.create(led_result_brithness, {
  start: [50],
  tooltips: [true],
  step: 1,
  range: {
    'min': 0,
    'max': 100
  },
  format: wNumb({
    decimals: 0,
    suffix: ' (%)'
  })
});

led_result_brithness.noUiSlider.on('update', function(values, handle) {
  var Format12 = wNumb({
    decimals: 0,
  });
  console.log(values[handle]);
 
});

var led_slider_2700k = document.getElementById('led-2700k');
noUiSlider.create(led_slider_2700k, {
  start: [50],
  tooltips: [true],
  range: {
    'min': 0,
    'max': 100
  },
  format: wNumb({
    decimals: 0,
    suffix: ' (%)'
  })
});
led_slider_2700k.noUiSlider.on('update', function(values, handle) {
  var Format12 = wNumb({
    decimals: 0,
  });
  console.log(values[handle]);

});
var led_slider_6500k = document.getElementById('led-6500k');
noUiSlider.create(led_slider_6500k, {
  start: [50],
  tooltips: [true],
  range: {
    'min': 0,
    'max': 100
  },
  format: wNumb({
    decimals: 0,
    suffix: ' (%)'
  })
});
var led_slider_red = document.getElementById('led-red');
noUiSlider.create(led_slider_red, {
  start: [50],
  tooltips: [true],
  range: {
    'min': 0,
    'max': 100
  },
  format: wNumb({
    decimals: 0,
    suffix: ' (%)'
  })
});
led_slider_red.noUiSlider.on('update', function(values, handle) {
  var Format12 = wNumb({
    decimals: 0,
  });
  console.log(values[handle]);
  SendTextData(JSON.stringify({
    Slider: 4,
    Value: Format12.from(values[handle])
  }))
});
var led_slider_green = document.getElementById('led-green');
noUiSlider.create(led_slider_green, {
  start: [50],
  tooltips: [true],
  range: {
    'min': 0,
    'max': 100
  },
  format: wNumb({
    decimals: 0,
    suffix: ' (%)'
  })
});
led_slider_green.noUiSlider.on('update', function(values, handle) {
  var Format12 = wNumb({
    decimals: 0,
  });
  console.log(values[handle]);
  SendTextData(JSON.stringify({
    Slider: 5,
    Value:...