从<template>动态设置输入值

Question

我正在尝试动态绘制范围输入，我设法做到了这一点，在按钮上单击创建了一个新的范围滑块，该值将不断更新。我现在想做的是设置min，max，  和来自draw_slider函数的值。

问题是我无法设置输入范围滑块的变量，例如最小值，最大值，值。

我试图通过以下方式获取temp的子元素

<img src="../assets/img/centered-logo.jpg">

    var slider = [temp.children].filter(x=> x.className == "slider")[0];
    slider.value = 10;

    function draw_slider()
    {
      var temp = document.querySelector('#slider_template');
      var clon = temp.content.cloneNode(true);
      var menu_location = document.querySelectorAll(".menu_section")[0];
      menu_location.appendChild(clon);
    }
    function set_up_events()
    {
    	document.querySelectorAll(".slidecontainer").forEach(function(element) {
        var slider = [...element.children].filter(x=> x.className == "slider")[0];
        var output = [...element.children].filter(x=> x.className == "slider-value")[0];
        slider.oninput = function() {
          output.innerHTML = this.value;
        }
      });
    }
    	
    function setup_menu()
    {
      draw_slider();
      set_up_events();	
    }
    

谢谢您的帮助。