スライダーでオブジェクト変数の値を変更するには？

質問

JavaScript スライダーでオブジェクト変数の値を変更するには？

<div id="wrap">
<div class="target">○</div>
<div class="target">○</div>
<div class="target">○</div>
</div>

<div>delay :
<input type="range" id="delay_slider" min="0" max="100" value="0" step="10">
<span id="delay_slider_span">0</span>
</div>

<script>
//全ての対象要素を取得して配列に変換
const targets = Array.from(document.querySelectorAll('#wrap .target'));

const animations = []; //生成アニメーションの格納配列

//取得した要素にアニメーションを設定
targets.forEach((target, i) => {
const animation = target.animate(
[
{ transform: 'translateX(0px)'},
{ transform: 'translateX(60px)'},
],
{
duration: 500,
fill: 'forwards',
delay: 0,
endDelay: 0
}
);
animation.cancel();
animations.push(animation);
});
</script>

スライダー要素を動かして、
オブジェクト変数の値「delay」を変更するためには
どういうコードで実現できますか？

くわしい方のお力添えをお待ちしております。

回答No.4

AsarKingChang

>アニメーションコードは配列に格納していますので
>その中の 指定したキー（delay）に対する
>値をスライダーで変更するにはどうするのか？
>それが問題です。

なので、それについて書いてたんですが。。
{
duration: 500,
fill: 'forwards',
delay: 0,
endDelay: 0
}
ここが、optionsオブジェクトなので、
{
duration: 500,
fill: 'forwards',
delay: v, ←こんな感じで、変数をいれるか？
endDelay: 0
}
または、Object waaなどで作って、
waa.delay=v; ←とそこだけ書き換えるか？
後はその変数を使ったAPIを叩けば継承されますので。

（と、ここまでの回答と同じなんですが）
>JavaScript スライダーでオブジェクト変数の値を変更するには？
が要定なので、あってるとおもいます。
後は、それを設定にループが使われてるようなので、
同じ用にセットすれば、満たされると思います。

回答No.3

AsarKingChang

>スライダーを動かして
>変数内のキー（delay）の値を
>どうしたら変更できるのでしょうか？

それだけだと、単に
delay: 0,　←ここに、現在の最新スライダー値を入れるだけでコールって感じになっちゃいますが。
ってのは、前のを消して再設定してるようなので、
animation.cancel();
animations.push(animation);
単に、最終スライダー値を初期値にしたものを
与えて、
targets.forEach((target, i) => {
こいつを、先ほどの、値が変化したときの、
疑似リスナーの中に入れれば、いいような。
（ってのを、わかってると思ったので、こういう回答だったんですよね）

意味間違ってました？

{
duration: 500,
fill: 'forwards',
delay: 0,
endDelay: 0
}
これを、Object化しておいて、例えばインスタンスの名前がwaa
なら、疑似リスナーの時、waa.delay=最新のスライダー値
で、このwaaをこのオブジェクトがある位置にいれて、
おしまい？って意味だと思ったんですよね。
animate(keyframes, options)
の、optionsをwaaにするだけでいいんじゃ？
って考えたんですよね。
（だって、cancelしてるから、って意味で）

補足

animation.cancel();
このコードを記述しないと
アニメーションコードを読み取った直後に
アニメーションを開始してしまうからなのです。

アニメーションコードは配列に格納していますので
その中の 指定したキー（delay）に対する
値をスライダーで変更するにはどうするのか？
それが問題です。

回答No.2

AsarKingChang

おまけ！（単なる遊び）

--部分抜粋--
<input type="range" id="delay_slider" min="0" max="100" value="0" step="10">
<input type="range" id="delay_slider2" min="0" max="100" value="0" step="10">
<script>
$(function () {
function custom_event(v) {
console.log("waa2 " + v);
$('input#delay_slider2').val(v);
}
--部分抜粋--
こうするだけで、スライダーのクローンが作れたので、
結構、、遊べるかも。
「スライダーで変数を動かす」+「変数でスライダーを動かす」
の融合系。

補足

ご助言をありがとうございます。

本題は
「スライダー要素を動かして、
オブジェクト変数の値「delay」を変更するためには
どういうコードで実現できますか？」

スライダーを動かして
その値を表示させることは卒業しています。

スライダーを動かして
変数内のキー（delay）の値を
どうしたら変更できるのでしょうか？

回答No.1

AsarKingChang

<!--
<script src="このソースにはJQが必要です。"></script>
-->
<script src="../api_assets/jquery-3.5.1.min.js"></script>
<input type="range" id="delay_slider" min="0" max="100" value="0" step="10">
<script>
$(function () {
function custom_event(v) {
console.log("waa2 " + v);
}

/* これだと、離した時しか反応していない */
$('input#delay_slider').change(function() {
console.log("waa " + $(this).val());
});

/* なんでもいい(この値が変化したらcustom eventを呼ぶ) */
let old=-1;
$('input#delay_slider').mousemove(function () {
let n=$('input#delay_slider').val();
if (old!=n) {
old=n;
/* custom event */
custom_event(n);
}
});
});
</script>

実際に試してみたところ（JQは使ってますが）
スライダー自体は、「ボタンを離した」時しか
イベントを発生させてないようなので、
「マウス」にリスナーをひっかけてそこから、
「ボタン」情報にアクセス。
しかし、それでは、ボタン以外を押してもイベントは
反応してしまうので、「ボタン」の値が
変化したか？をチェックして変化していたら、
「押したものが、そのボタンだと判断」
今回のサンプルだと、
custom_event(n);
をカスタムのリスナーとして呼び出させています。
これで、リアルタイムに変化するので、後は
これを好きに組み込めば、何個でも、行けるかと思います。

Jqueryは使ってますが、書いてる命令は
単純なJavaScriptのリスナーと同じ物なので、
置き換えて読んでもらうか、
jquery-3.5.1.min.js（など）
（複雑な命令は使ってないので、バージョンはどれでもいい）
をローカルにコピーしてscript src=..で取り込んであげれば
動きますので。

補足

ご助言をありがとうございます。
スライダーの動かし方と値の取得方法は
VanillaJSで 簡単に取得できますよ。

それよりも、本題の
「配列（animations）に格納された変数から
キー（delay）に対する valueを
どのようにすれば変更できるか？」

そのコードを知りたいのです。