Гендель на ползунке громкости не появляется? - PullRequest
Новая
       8

Гендель на ползунке громкости не появляется?

1 голос
/ 18 февраля 2020

У меня есть ползунок громкости, я использую jquery. И хотя это работает, «шар» или «ручка» не появляется.

Как сделать так, чтобы обработанный показ отображался?

Я импортировал для 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>

Спасибо за любую помощь, которую я получаю, пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

1 Ответ

2 голосов
/ 18 февраля 2020

Вам нужно включить соответствующие библиотеки 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>
...