JSFiddle - React, Tailwind, and code Playground

by MrSala

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Simulación de movimiento de piezas</title>
  <script src="script.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/smoothness/jquery-ui.css">  
  <title>Desactivar sliders al presionar un botón</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <style>
    .ui-slider-disabled.ui-state-disabled .ui-slider-range,
    .ui-slider-disabled.ui-state-disabled .ui-slider-handle {
      background-image: none;
    }
    .ui-slider-disabled.ui-state-disabled {
      opacity: 0.5;
      filter: alpha(Opacity=50);
      cursor: default;
      pointer-events: none;
    }
    
  </style>
</head>
<body>
  <h1>Juego 4: Simulación de línea interdependiente con variabilidad</h1>
  <center>En este juego puedes modificar el WIP previo para cada estación (Excepto A - Ilimitado). Puedes cambiar la variabilidad y ajustar la capacidad media de cada estación</center>
  <hr>
  <div class="container_campo">
    <label for="numRounds">Establecer el número de rondas (mín: 5 | máx: 100):</label>
    <input type="number" id="numRounds" name="numRounds" value="20" min="1" max="100">
  </div>


  <h2>Ronda de producción <span id="roundNumber">0</span> de <span id="max_round"></span></h2> 
  <div id="container">
    <div class="process" id="processA">
      <h3>Estación A</h3>
      <p><img src="https://cdn-icons-png.flaticon.com/128/3107/3107210.png" alt="chef" width="60" height="60"></p>
      <div id="container_desliza">
        <h3>Seleccione la variabilidad de la capacidad</h3>
        <div id="slider-range"></div>
        <div class="slider-labels">
         <span>1</span>         
         <span>2</span>         
         <span>3</span>         
        ...

CSS

body {
  font-family: 'Open Sans', sans-serif;
  background-color: #F8F8F8;
  font-size: 13px;
}

h1 {
  font-size: 30px;
  font-weight: 300;
  text-align: center;
  margin-bottom: 10px;
}

h2 {
  font-size: 17px;
  color: #C70039;
  font-weight: 400;
  text-align: center;
  margin-bottom: 0px;
}

h3 {
  font-size: 14px;
  font-weight: 600;
   ;
  margin-bottom: 5px;
}

#container,
#container_modal{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 0px;
}

#container_boton,
#container_boton_esta{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 0px;
  margin-bottom: 30px;
}

.process {
  width: 120px;
  height: 650px;
  background-color: white;
  border: 2px solid #E2E2E2;
  text-align: center;
  padding: 20px;
  position: relative;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}

.processt {
  width: 170px;
  height: 650px;
  background-color: white;
  border: 2px solid #E2E2E2;
  text-align: center;
  padding: 20px;
  position: relative;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}


#rollDiceButton,
#movePiecesButton,
#resultsButton,
#iniciarJuego,
#acelerar,
#reiniciarJuego {
  margin-top: 40px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: none;
  border-radius: 50px;
  background-color: #0099ff;
  color: #fff;
  font-size: 16px;
  padding: 12px 24px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#rollDiceButton:hover,
#movePiecesButton:hover,
#resultsButton:hover,
#iniciarJuego:hover,
#acelerar:hover,
#reiniciarJuego :hover{
  background-color: #0084e6;
}

#rollDiceButton:active,
#movePiecesButton:active,
#resultsButton:active,
#iniciarJuego:active,
#acelerar:active,
#reiniciarJuego:active {
  background-color: #0073cc;
}

#rollDiceButton:disabled,
#movePiecesButton:disabled,
#resultsButton:disabled,
#iniciarJuego:disabled,
#acelerar:disabled,
#reiniciarJuego:disabled{
  opacity:...

JavaScript

const slider_B = document.getElementById("piloto_B");
const slider_C = document.getElementById("piloto_C");
const slider_D = document.getElementById("piloto_D");
const slider_E = document.getElementById("piloto_E");
const slider_F = document.getElementById("piloto_F");
const minLabel = document.querySelector(".slider-min");
const maxLabel = document.querySelector(".slider-max");
const scaleLabel = document.querySelector(".slider-scale");

slider_B.oninput = function() {
  const value = this.value;
  const min = this.min;
  const max = this.max;
  const offset = Number((value - min) * 100 / (max - min));
  minLabel.innerHTML = min;
  maxLabel.innerHTML = max;
  scaleLabel.style.left = `${offset}%`;
};
slider_C.oninput = function() {
  const value = this.value;
  const min = this.min;
  const max = this.max;
  const offset = Number((value - min) * 100 / (max - min));
  minLabel.innerHTML = min;
  maxLabel.innerHTML = max;
  scaleLabel.style.left = `${offset}%`;
};
slider_D.oninput = function() {
  const value = this.value;
  const min = this.min;
  const max = this.max;
  const offset = Number((value - min) * 100 / (max - min));
  minLabel.innerHTML = min;
  maxLabel.innerHTML = max;
  scaleLabel.style.left = `${offset}%`;
};
slider_E.oninput = function() {
  const value = this.value;
  const min = this.min;
  const max = this.max;
  const offset = Number((value - min) * 100 / (max - min));
  minLabel.innerHTML = min;
  maxLabel.innerHTML = max;
  scaleLabel.style.left = `${offset}%`;
};
slider_F.oninput = function() {
  const value = this.value;
  const min = this.min;
  const max = this.max;
  const offset = Number((value - min) * 100 / (max - min));
  minLabel.innerHTML = min;
  maxLabel.innerHTML = max;
  scaleLabel.style.left = `${offset}%`;
};

var minA = 1;
var minB = 1;
var minC = 1;
var minD = 1;
var minE = 1;
var minF = 1;

var maxA = 1;
var maxB = 1;
var maxC = 1;
var maxD = 1;
var maxE = 1;
var maxF = 1;

$(function() {
  var sliderRange =...