jquery - Jquery 滑块功能不起作用或在浏览器中显示

Question

Jquery 滑块功能在浏览器中不起作用并显示错误。请指导我如何解决此问题。我尝试在 StackOverflow 上查找此问题并找到很多答案，但找不到成功。谢谢

以下是该代码

$("#sliderHeight, #sliderWidth").slider({
  min: 100,
  max: 500,
  slide: refreshImage
});

$('#divOpacity').slider({
  min: 0,
  max: 100,
  value: 100,
  slide: refreshImage
});

function refreshImage() {
  var height = $('sliderHeight').slider('value');
  var width = $('sliderWidth').slider('value');
  var opacity = $('divOpacity').slider('value');

  $('#myImg').css({
    'height': height,
    'width': width,
    'opacity': opacity / 100
  });

  $('#divDimensions').html(
    'height = ' + height + '<br>' +
    'width = ' + width + '<br>' +
    'opacity = ' + opacity / 100 + '<br>'
  );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>


<div id="sliderHeight"></div>
<br />
<div id="sliderWidth"></div>
<br />
<div id="divOpacity"></div>
<br />
<div id="divDimensions"></div>
<br />
<img id="myImg" src="https://cdn.pixabay.com/photo/2013/10/29/18/20/chrysanthemum-202483_960_720.jpg" style="width: 100px; height: 100px" />

标签： jqueryjquery-uijquery-ui-slider