<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IEQ Education</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>

<body>
  <div class="container">
    <div class=" section left ">
      <div class="heading"> Foundations of a
        Healthy Building
      </div>
      <div class="buttons" id="left-buttons">
        <div class="vid-button " onclick="playVideo('./assets/videos/overview.mp4',true)">
          <div><img src="./assets/ieq assets/ieq.png">
            </img>
          </div>
          <div>IEQ Video</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/air.mp4',true)">
          <div><img src="./assets/ieq assets/air.png">
            </img>
          </div>
          <div>Air Quality</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/thermal.mp4',true)">
          <div><img src="./assets/ieq assets/thermal.png">
            </img>
          </div>
          <div> Thermal Health</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/ventilation.mp4',true)">
          <div><img src="./assets/ieq assets/ventilation.png">
            </img>
          </div>
          <div>Ventilation</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/moisture.mp4',true)">
          <div><img src="./assets/ieq assets/moisture.png">
            </img>
          </div>
          <div>Moisture</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/noise.mp4',true)">
          <div><img src="./assets/ieq assets/noise.png">
            </img>
          </div>
          <div> Noise</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/dust.mp4',true)">
          <div><img src="./assets/ieq assets/pestanddust.png">
            </img>
          </div>
          <div>Dust & Pests</div>
        </div>
      </div>

    </div>
    

    <div class="videobar">
      <div class="tool-tip" id="tooltip">
        <!-- <img src="./assets/Tooltiprl.png"> -->
        <p>Please select a video title from either side to play </p>
      </div>
      <div class="sub-container" id="subtitles">
        <div class="subtitle-buttons" style="flex-direction:row;">

          <p>SUBTITLES</p>
        </div>
        <div class="subtitle-buttons">
          <div class="sub-button" onclick="setSubtitles('fre')">FRENCH </div>
          <div class="sub-button" onclick="setSubtitles('jap')">JAPANESE
          </div>
          <div class="sub-button" onclick="setSubtitles('spa')">SPANISH
          </div>
        </div>
      </div>
    </div>
    <div class="logo">
      <img src="./assets/Daikin Logo 1080.png" style="width: 100%;">
    </div>
    <div class="video-container">
      <div class="video-heading"> <strong>I</strong>ndoor <strong>E</strong>nvironment <strong>Q</strong>uality</div>
      <style>
        video::cue {
          font-size: 35px;
          z-index: 1000;
          position: relative;
        }
      </style>

      <video src="" autoplay controls style="display: none; width: 100% ; height:75%" id="videoPlayer"
        class="videosection">
      </video>
      <div id="custom-subtitle" class="custom-subtitle"></div>
      <!-- <img src="./assets/IEQ Background 1.gif" id="gifPlaceholder" style=" width: 100%; height: 75%;" /> -->
      <video id="loopingVideoPlayer" style="width: 100%; height: 75%;" autoplay muted></video>

      <!-- <div class="volume-control" style="width: 19%; margin-top: 10px; display: flex; align-items: right;">
        <label for="volumeSlider" style="margin-right: 10px;">Volume:</label>
        <input type="range" min="0" max="100" value="35" id="volumeSlider" style="width: 100%;">
      </div> -->
      <div class="volume-control">
        <div class="volume-icon" id="volumeIcon">
          <i class="fas fa-volume-up"></i>
        </div>
        <div class="volume-slider" id="volumeSliderContainer">
          <input type="range" min="0" max="100" value="35" id="volumeSlider">
        </div>
      </div>
    </div>
    <div class=" section right">
      <!-- <div class="heading-right"> IEQ in the
        DC Office</div> -->
      <div class="buttons" id="right-buttons">
       
      </div>

    </div>
  </div>
  <script src="./assets/videos/config.js"></script>

  <script src="script.js"></script>
</body>

</html> this is my index.html and this is my css property /* Volume Control Container */
.volume-control {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Volume Icon */
.volume-icon {
  cursor: pointer;
  font-size: 24px;
  color: white;
}

/* Hide the volume slider by default */
.volume-slider {
  display: none;
  margin-bottom: 10px;
}

/* Style the volume slider */
.volume-slider input[type="range"] {
  -webkit-appearance: none;
  width: 100px;
  height: 5px;
  background: #ddd;
  border-radius: 5px;
  outline: none;
}

/* Slider Thumb */
.volume-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  background: #4CAF50;
  border-radius: 50%;
  cursor: pointer;
}

.volume-slider input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: #4CAF50;
  border-radius: 50%;
  cursor: pointer;
} and this videoPlayer.volume = volumeSlider.value / 100;

// Toggle the display of the volume slider on icon click
volumeIcon.addEventListener('click', function(event) {
  event.stopPropagation(); // Prevent click from bubbling up
  if (volumeSliderContainer.style.display === 'block') {
    volumeSliderContainer.style.display = 'none';
  } else {
    volumeSliderContainer.style.display = 'block';
  }
});

// Adjust the video volume when the slider value changes
volumeSlider.addEventListener('input', function() {
  videoPlayer.volume = this.value / 100;
});

// Hide the volume slider when clicking outside
document.addEventListener('click', function(event) {
  // Check if the click was inside the volume control or not
  var isClickInside = volumeIcon.contains(event.target) || volumeSliderContainer.contains(event.target);

  if (!isClickInside) {
    volumeSliderContainer.style.display = 'none';
  }
}); is javascript I want to include two things : 

1. When user clicks volume button currently the volume button goes up and slider appears instead the volume button should shift left and slider should appear and go back to same place one done and 

2. Till the place where user have slided the slider it should be blue in color and remaining should be white in color how can i achieve this