音量滑块上的 Handel 未显示？

Question

我有一个音量滑块，我正在使用 jquery。尽管它有效，但 'ball' 或 'handle' 没有出现。

我怎样才能让 handle 显示出来？

我已为 jquery 导入：

<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

这是所有代码：js 代码来处理体积的变化，以及它的 html 和 css。

$("#volume").slider({
   min: 0,
   max: 100,
   value: 0,
  range: "min",
   slide: function(event, ui) {
     setVolume(ui.value / 100);
   }
 });

 function setVolume(myVolume) {
    if (audioElement != undefined) {
      audioElement.volume = myVolume;
    }
 }

.audioUtilitiesDiv {
  width: 20%;
  display: inline-block;
  background-color: lightblue;
}

#player {
 width: 350px;
 height: 50px;
 position: relative;
 margin: 0 auto;
 top: 80px;

 i {
  position: absolute;
  margin-top: -6px;
  color: #666;
 }

 i.fa-volume-down {
  margin-left: -8px;
 }

 i.fa-volume-up {
  margin-right: -8px;
  right: 0;
 }
}

#volume {
 position: absolute;
 left: 24px;
 margin: 0 auto;
 height: 5px;
 width: 300px;
 background: #555;
 border-radius: 15px;

 .ui-slider-range-min {
  height: 5px;
  width: 300px;
  position: absolute;
  background: green;
  border: none;
  border-radius: 10px;
   outline: none;
 }

 .ui-slider-handle {
  width: 20px;
   height: 20px;
  border-radius: 20px;
   background: #FFF;
   position: absolute;
   margin-left: -8px;
   margin-top: -8px;
   cursor: pointer;
   outline: none;
 }
}

    <div class="audioUtilitiesDiv">
      <div id="player">
        <i class="fa fa-volume-down"></i>
        <div id="volume"></div>
        <i class="fa fa-volume-up"></i>
      </div>
    </div>

感谢您对我的帮助，如果您需要更多信息，请告诉我。

Answer 1

您需要包含正确的 jQuery、jQuery UI 和 CSS 库，以使 Slider 正常工作。我还发现了一些 CSS 语法错误。考虑以下因素。

$(function() {
  var audioElement = $("<audio>");

  function setVolume(myVolume) {
    if (audioElement != undefined) {
      audioElement.volume = myVolume;
    }
  }

  $("#volume").slider({
    min: 0,
    max: 1,
    value: 0,
    step: 0.1,
    range: "min",
    slide: function(event, ui) {
      setVolume(ui.value);
    }
  });
});

.audioUtilitiesDiv {
  display: inline-block;
  background-color: lightblue;
}

#player {
  width: 350px;
  height: 50px;
  position: relative;
  margin: 0 auto;
  top: 80px;
}

i {
  position: absolute;
  margin-top: -6px;
  color: #666;
}

i.fa-volume-down {
  margin-left: -8px;
}

i.fa-volume-up {
  margin-right: -8px;
  right: 0;
}

#volume {
  position: absolute;
  left: 24px;
  margin: 0 auto;
  height: 5px;
  width: 300px;
  background: #555;
  border-radius: 15px;
}

.ui-slider-range-min {
  height: 5px;
  width: 300px;
  position: absolute;
  background: green;
  border: none;
  border-radius: 10px;
  outline: none;
}

.ui-slider-handle {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #FFF;
  position: absolute;
  margin-left: -8px;
  margin-top: -8px;
  cursor: pointer;
  outline: none;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="audioUtilitiesDiv">
  <div id="player">
    <i class="fa fa-volume-down"></i>
    <div id="volume"></div>
    <i class="fa fa-volume-up"></i>
  </div>
</div>

音量滑块上的 Handel 未显示？

Handel on volume slider not showing up?

html

css

jquery

jquery-ui