を使用してサイズを変更したい三角形のコードでは、単に三角形を駆動しているプロパティの値を更新する<input type="range"/>
スライダーを使用することができます。あなたの場合、これはborder-width
です。
$(function() {
var triangle = $('.triangle');
var slider = $('#triangle-control');
slider.on('change', function(e) {
triangle.css({
'border-width': this.value + 'px'
})
})
});
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px;
border-color: transparent transparent #007bff transparent;
transition: border-width 500ms ease-in;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<input id="triangle-control" type="range" min="20" max="100"/>
<div class="triangle"></div>
</body>
</html>
コード助けを求める質問は、** **好ましくスタックスニペットに**質問自体に**それを再現するために必要な最短のコードを含める必要があります。あなたがリンクを提供したにもかかわらず、それが無効になるのであれば、あなたの質問は、同じ問題を抱える将来の他のSOユーザにとっては価値がないでしょう。 [**私のウェブサイトの何かが動作しないのは、リンクを貼り付けるだけです**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-リンクを張ることはできません)。 –